Skip to content
CroStreamUI kit

Collections

Browsing many things at once: selection, trees, asset grids, cards and rows, filters, selection bars, thumbnails, infinite lists and the inspector.

01SelectionModel

SelectionModel

The selection every collection shares, with nothing drawn: replace, toggle and range picks, a cursor that is the list's tab stop, and the file-manager keyboard model. Grids, tables and trees all run on it.

A plain list on the model Tab in (it works with nothing selected), then use the keys on the right. Click, Ctrl/⌘-click and Shift-click work too.
  • !hydrate
  • !lurk
  • !clip
  • !socials
  • !discord
  • !uptime
  • !so
  • !hug
State and keys What the model holds right now.
Selected
nothing
Anchor
—
Cursor
—
Opened
— (Enter opens)
  • ↑ ↓ move and select
  • Shift ↓ extend a range
  • Ctrl ↓ move without selecting
  • Space toggle the cursor
  • Ctrl A all · Esc none
  • Home End PageDown

02TreeView

TreeView

Layers and folders: a real ARIA tree with a single tab stop, typeahead, rename in place, row actions, drag and drop with clear drop lines, and a keyboard path for every drag, announced as it happens.

Layers Multi-select. Drag rows (above, inside or below), or use Alt+arrows. F2 or double-click renames. Eye and lock show on hover, focus and selection; Shift+F10 opens the row's menu.
Alert box
Title
Viewer name
Raid art
Chat box
Webcam frame locked
Follower goal
Background hidden
Folders Single select: selection follows focus. Counts at the end of each row; containers open with → and close with ←. Drop media from the grid below onto a folder.
Media 128
Alerts 14
Moments 42
Fonts 6
Trash 3
Keys The full tree keyboard model.
  • ↑ ↓ move
  • → open, then first child
  • ← close, then parent
  • Home End first, last
  • Type a name to jump
  • F2 rename
  • Alt ↑ Alt ↓ reorder
  • Alt → nest into the row above
  • Alt ← un-nest
  • Shift F10 row menu

03AssetGrid

AssetGrid

The grid you pick media, widgets and presets from. Tab lands on it even with nothing selected; arrows follow the real column count; drag a box around several; drag them onto a folder.

Media library Shift ranges, Ctrl/⌘ toggles, Ctrl/⌘+Arrow moves without selecting, Space toggles, Ctrl/⌘+A, Escape clears, Enter or double-click opens. Drag on empty space to box-select. Scroll for more (or use Load more).
Alerts 14 items
Sounds 32 items
raid-banner.png 214 KB
0:08 hype-train.webm 0:08 · 2.1 MB
0:03 raid-horn.mp3 0:03 · 96 KB
follow-star.png 48 KB
0:30 moment-0042.mp4 0:30 · 18.4 MB
Inter Display 312 KB
0:01 water-drop.ogg 0:01 · 22 KB
logo-glow.png 130 KB
broken-link.png 0 KB
overlay-pack.zip 12.8 MB
alert-box.js 4 KB
1:12 brb-loop.webm 1:12 · 6.0 MB
Keys The same model as the SelectionModel list, in two dimensions.
  • ← → ↑ ↓ move
  • Shift → extend
  • Ctrl → move only
  • Space toggle
  • Ctrl A all
  • Enter open
  • Shift F10 menu

04Thumbnail

Thumbnail

A picture of a thing: lazy and decoded off the main thread, fading in when ready. A missing or broken picture falls through to a custom fallback, then to an icon for its kind; never the browser's torn image.

The fallback chain Picture → custom fallback → kind icon. The broken link falls through cleanly.
Picture
Broken → icon
Audio: waveform
Font: specimen
Folder
Archive
Code
Widget
Video 16:9, a duration badge and a play button laid over the picture.
Moment 42 preview 0:30
Transparency The checkerboard shows which parts of a PNG are see-through; High contrast makes it bolder.

05CollectionView

CollectionView

The body of a library page: skeleton cards while loading, an error with Try again, “nothing here yet”, “nothing matches” with Clear filters, and the items as a grid or a list, flat or grouped under headed sections with counts.

States Pick a state; the grid/list switch keeps the same items in both layouts.

Alerts ,3

  • Built in

    Raid alert

    Popular

    A banner that slides in with the raider’s name and party size.

    Alerts · 214 uses · 2 days ago

    Built in.
    • Animated
    • Minimal

  • Kawaii sub alert

    Hearts, sparkles and a bouncing thank-you card for new subs.

    Alerts · 42 uses · 3 hours ago

    • Cute
    • Vtuber
    • Animated
    • +1more: Retro

  • Kill feed

    Tactical kill feed styled for FPS streams.

    Alerts · 33 uses · yesterday

    • Fps

Goals ,2

  • Built in

    Follower goal

    A progress bar that fills toward tonight’s follower goal.

    Goals · 96 uses · last week

    Built in.
    • Minimal

  • Sub train

    Counts a sub train and shows how long it has left.

    Goals · 12 uses · 5 days ago

    • Fps
    • Animated

Chat ,1

  • Chat bubbles

    Messages float up as rounded bubbles with badges and emotes.

    Chat · 61 uses · yesterday

    • Cute
    • Vtuber
    • Animated

Labels ,1

  • Now playing

    Shows the song playing right now, with the album colour.

    Labels · 18 uses · last month

    • Minimal

Scenes ,1

  • BRB scene

    A looping be-right-back screen with a countdown.

    Scenes · 9 uses · 2 weeks ago

    • Retro
    • Animated

06FilterBar

FilterBar

Search, filters, sort, grid or list, a live result count and refresh — the toolbar above every library. It can remember view and sort, and stay out of the way until a list is long enough to need it.

Widgets toolbar The tag filter is a dialog: Tab into its checklist, Esc or Done closes it and focus returns to the trigger. Chosen tags stay visible as removable chips. View and sort persist (reload the page).
  • Cute
2 of 8 widgets
SearchInput Debounced: the settled query arrives 250ms after typing stops, at once on Enter or clear. Esc clears.

Searched: “”

SortControl Key plus direction; the toggle says the direction in words.

name, ascending

FacetFilter Searchable once there are more than eight options; swatches and counts per option.
revealAfter A list of three needs no toolbar: the bar appears once the collection has more than four items.
3 overlays

07ItemCard

ItemCard

A card for one thing in a library. The title is the only link and its hit area covers the card; the star, the menu and Play sit beside it as real buttons, never nested inside. ItemRow is the same props as a list row.

Cards Hover or Tab to reveal the tools (always shown on touch). Shift+F10 or right-click opens the menu; F2 renames in place; drag a card onto a category below. The third card's star save fails and rolls back.
  • Built in

    Raid alert

    Popular

    A banner that slides in with the raider’s name and party size.

    Alerts · 214 uses · 2 days ago

    Built in.
    • Animated
    • Minimal
  • Built in

    Follower goal

    A progress bar that fills toward tonight’s follower goal.

    Goals · 96 uses · last week

    Built in.
    • Minimal

  • Chat bubbles

    Messages float up as rounded bubbles with badges and emotes.

    Chat · 61 uses · yesterday

    • Cute
    • Vtuber
    • Animated

  • Kawaii sub alert

    Hearts, sparkles and a bouncing thank-you card for new subs.

    Alerts · 42 uses · 3 hours ago

    • Cute
    • Vtuber
    • Animated
    • +1more: Retro

  • No picture: the tools sit in the corner of the body.

    1920 × 1080 · 4 elements

  • Legacy alerts

    Disabled: readable, outlined, nothing opens.

    Needs an update

Rows Columns give way by priority as the row narrows (Updated first, then Category, then tags). Drag the corner to try it.
  • Raid alert Built in
    A banner that slides in with the raider’s name and party size.
    Category:Alerts
    Uses:214
    Updated:2 days ago
    • Animated
    • Minimal
  • Follower goal Built in
    A progress bar that fills toward tonight’s follower goal.
    Category:Goals
    Uses:96
    Updated:last week
    • Minimal
  • Chat bubbles
    Messages float up as rounded bubbles with badges and emotes.
    Category:Chat
    Uses:61
    Updated:yesterday
    • Cute
    • Vtuber
    • +1more: Animated
  • Kawaii sub alert
    Hearts, sparkles and a bouncing thank-you card for new subs.
    Category:Alerts
    Uses:42
    Updated:3 hours ago
    • Cute
    • Vtuber
    • +2more: Animated, Retro
  • 1920 × 1080
    Elements:4
  • toolsVisible keeps the buttons showing; mediaSize="auto" lets the tile size itself.
Keys Everything the pointer does has a key.
  • Enter open
  • Shift F10 menu
  • F2 rename
  • Tab star, Play, menu

08SelectionBar

SelectionBar

“3 clips selected” and what you can do to all of them. It appears with the selection, is announced politely, and Escape (anywhere outside a field or dialog) clears it.

With a grid Select clips (Shift/Ctrl, or drag a box); the bar follows. Select all picks every clip; Esc clears.
3 clips selected
raid-banner.png
0:08 hype-train.webm
0:03 raid-horn.mp3
follow-star.png
0:30 moment-0042.mp4
Inter Display
0:01 water-drop.ogg
logo-glow.png
broken-link.png
overlay-pack.zip
alert-box.js
1:12 brb-loop.webm
3 selected

09InfiniteList

InfiniteList

The next page loads as the end scrolls near — and a “Load more (N left)” button always works too, because focusing the last item isn't scrolling near it.

Moments Scroll the box to the end, or use the button. Loading is announced.
  • moment-0042.mp40:15
  • moment-0041.mp40:22
  • moment-0040.mp40:29
  • moment-0039.mp40:36
  • moment-0038.mp40:43
  • moment-0037.mp40:50
  • moment-0036.mp40:57
  • moment-0035.mp40:19
  • moment-0034.mp40:26
  • moment-0033.mp40:33
  • moment-0032.mp40:40
  • moment-0031.mp40:47

10InspectorPanel

InspectorPanel

The details pane beside a library: a hint when nothing is selected, a preview, facts and fields for one item, a summary for several, and actions pinned at the bottom.

Nothing selected
One item
Several

11CategoryNav

CategoryNav

The sidebar that picks a part of a library, with counts — and a drop target. Dropping is never the only way: every card's menu has Move to… for keyboard and touch.

Drag a card onto a category Or open a card's menu (Shift+F10) and use Move to. The drop target lights up and is announced.

12FavoriteToggle

FavoriteToggle

A star that answers at once and quietly undoes itself if saving fails, saying so to screen readers. A toggle button: filled amber star when on, not just a colour change.

Optimistic, with rollback The second star's save fails after half a second; it flips back and the failure is announced.
Raid alert (saves) Follower goal (fails) Disabled
Heart and labelled icon="heart" for favorites; labelled turns it into a button-sized toggle for a detail page.
Heart

13Libraries, assembled

Libraries, assembled

Two whole screens from kit parts only: the media library (folders, toolbar, selection bar, asset grid, inspector) and the widgets library (categories, toolbar, grouped cards that switch to rows).

Media library Pick a folder, select clips (box-select works), and watch the inspector and selection bar follow.
Media 128
Alerts 14
Moments 42
Fonts 6
Trash 3
12 files
alert-box.js
1:12 brb-loop.webm
broken-link.png
follow-star.png
0:08 hype-train.webm
Inter Display
logo-glow.png
0:30 moment-0042.mp4
overlay-pack.zip
raid-banner.png
0:03 raid-horn.mp3
0:01 water-drop.ogg
Widgets library Categories on the left, the toolbar on top; favourites first, then built in, then yours. Switch to list and the same items become rows.
8 widgets

Favourites ,2

  • Built in

    Raid alert

    Popular

    A banner that slides in with the raider’s name and party size.

    Alerts · 214 uses · 2 days ago

    Built in.
    • Animated
    • Minimal

  • Chat bubbles

    Messages float up as rounded bubbles with badges and emotes.

    Chat · 61 uses · yesterday

    • Cute
    • Vtuber
    • Animated

Built in ,1

  • Built in

    Follower goal

    A progress bar that fills toward tonight’s follower goal.

    Goals · 96 uses · last week

    Built in.
    • Minimal

Yours ,5

  • Kawaii sub alert

    Hearts, sparkles and a bouncing thank-you card for new subs.

    Alerts · 42 uses · 3 hours ago

    • Cute
    • Vtuber
    • Animated
    • +1more: Retro

  • Kill feed

    Tactical kill feed styled for FPS streams.

    Alerts · 33 uses · yesterday

    • Fps

  • Now playing

    Shows the song playing right now, with the album colour.

    Labels · 18 uses · last month

    • Minimal

  • Sub train

    Counts a sub train and shows how long it has left.

    Goals · 12 uses · 5 days ago

    • Fps
    • Animated

  • BRB scene

    A looping be-right-back screen with a countdown.

    Scenes · 9 uses · 2 weeks ago

    • Retro
    • Animated