Eight families of interactive surfaces — chat, wizards, uploads, search, filters, tables, tag inputs, date pickers. Five variants each, every one a working demo with real state.
Message threads, typing indicators, suggestion chips, threaded replies, and a full-app chat layout.
Bubble thread with composer. Enter or click Send pushes a new message; bot echoes after a beat.
.chat.chat-thread.chat-msgAfter you send, three-dot indicator appears while the agent "thinks", then replies.
.chat-typingQuick-reply chips below the input. Click one to send it as a message.
.chat-suggestionsClick Reply under a message to compose a nested response inline.
.chat-thread-repliesSidebar contacts + main thread + composer. Click a contact to switch threads.
.chat-appSegmented step indicators, side rails, summary review, onboarding cards, and per-step circular progress.
Segmented indicator + form panel + Back/Next. Steps validate before advancing.
.wiz.wiz-stepsWelcome aboard.
Left rail lists all steps with active / completed / upcoming states. Click completed to revisit.
.wiz-railClick finish to continue.
Final step shows captured fields with per-section Edit buttons that jump back.
.wiz-summaryFull-bleed welcome cards with skip / next. Dots show position.
.wiz-onbDesign tokens, motion, components — all in one substrate.
Each step has sub-tasks; the ring fills as you check them off.
.wiz-circDrop zones, preview grids, progress lists, image crop, and multi-step workflows.
Drag files over to highlight. Click to browse. Names appear under the zone.
.up-dropEach uploaded file becomes a tile. Click × to remove.
.up-preview-gridEach upload animates a bar from 0–100% in real time.
.up-row__barCrop frame is draggable inside the preview. Apply to "save" the crop.
.up-cropDrop → Preview → Uploading → Done. Step indicator fills as you advance.
.up-stepsAll files uploaded successfully.
Live filtering, typeahead dropdowns, filters, grouped categories, and empty-state recovery.
Type to filter results in real time. Count chip updates.
.sr.sr-listToggle category chips to narrow results. Multiple chips combine.
.sr-filtersDropdown opens as you type. Arrow keys navigate, Enter selects.
.sr-dropdownResults group under section headers as you search.
.sr-group-hWhen nothing matches, suggest popular searches as chips.
.sr-emptyVertical facets, price ranges, collapsible groups, active-chip strips, and mobile drawers.
Each checkbox filters the result list live.
.flt.flt-checkDual-handle range slider plus a Clear all button.
.flt-rangeClick a group header to expand or collapse its facets.
.flt-collapseApplied facets appear as removable chips above the results.
.flt-activeOn narrow widths, the sidebar collapses behind a Filters button that opens a full-screen drawer.
.flt-drawerSorting, pagination, row actions, inline edit, and expandable detail rows.
Click a column header to sort ascending; click again for descending.
.tbl| Name | Role | Status |
|---|---|---|
| Plover Hexstrom | Engineer | Active |
| Plover Hexstrom | Architect | Active |
| Plover Hexstrom | Researcher | Away |
| Plover Hexstrom | Maintainer | Active |
Five rows per page. Next/Prev and numbered buttons navigate.
.tbl-paginate| ID | User | Plan |
|---|
Per-row buttons plus a select-all checkbox. Bulk bar appears when rows selected.
.tbl-actions.tbl-bulkbar| Name | Actions | ||
|---|---|---|---|
| Ada | ada@lab.io | ||
| Grace | grace@lab.io | ||
| Alan | alan@lab.io |
Double-click a cell to edit. Enter or blur to save, Escape to cancel.
.is-edit| Name | Role | |
|---|---|---|
| Plover Hexstrom | Engineer | ada@lab.io |
| Plover Hexstrom | Architect | grace@lab.io |
| Plover Hexstrom | Researcher | alan@lab.io |
Click a row to reveal a detail panel below it.
.tbl-expand| Order | Customer | Total |
|---|---|---|
| #1024 | Plover Hexstrom | $129.00 |
| Items: 3 · Shipped 2026-04-11 · Tracking 1Z999AA1 | ||
| #1025 | Plover Hexstrom | $59.00 |
| Items: 1 · Pending · ETA 2026-05-18 | ||
| #1026 | Plover Hexstrom | $249.00 |
| Items: 5 · Delivered 2026-04-30 | ||
Typed-text-to-chip patterns with suggestions, limits, colors, and grouping.
Type a word, press Enter — it becomes a chip. Click × to remove.
.tag-inputAs you type, a dropdown shows matches. Click or arrow + Enter to add.
.sr-dropdownMaximum 5 tags; counter shows remaining; input disables at limit.
.tag-input__counterEach new tag gets a stable color hash from its label.
.lsd-chipType cat:value (e.g. color:red) to add a tag into a named group.
.tag-input__group-hSingle date, range, date+time, presets, and inline calendars.
Click input to open the calendar popover. Pick a day to populate.
.dpPick start, then end. Days between highlight as the range.
.dp.is-in-rangePick a day, then set hours and minutes below.
.dp-cal__timeToday, Yesterday, Last 7 days, Last 30 days, plus a custom calendar.
.dp-presetsAlways-visible calendar, no popover. Useful for booking flows.
.dp.is-inlineIntro copy.
| Name | Role |
|---|---|
| Ada | Engineer |
| Name | Actions | |
|---|---|---|
| Ada |
| Ada |
| #1024 | Ada |
| Details… | |