Every recipe here is plain classes on plain elements: no component to import, no framework, no shadow DOM — copy the markup, restyle it with the same CSS variables the chat reads. Each family has one page, its live preview first; every class of the kit on one page is the classes reference.
Controls
Section titled “Controls”- Button — The button. Ready-made classes; nothing to configure.
- Field — Form fields. Ready-made classes; nothing to configure.
Display
Section titled “Display”- Avatar — Sizes, shape, image + initials fallback
- Icon — The icon. Every glyph the library draws carries this class.
- Badge — Small count or status pill
- Tag — A removable chip
- Thumbnail — The thumbnail. A media tile: a fixed square that clips whatever is dropped
- Spinner — A rotating indicator
- Progress — Determinate bar + indeterminate variant
- Skeleton — A loading placeholder
- Divider — Horizontal, vertical, optionally labelled
- Alert — A callout
- Card — A surface with optional header/body/footer
- Kbd — A keyboard key
- Mark — The mark: a row a list has settled on.
Surfaces
Section titled “Surfaces”- Tabs — One row of tabs, and the panel under it
- Accordion — Stacked disclosures
- Menu — A floating list of commands
- Popover — A floating box, and nothing else
- Dialog — A modal, drawn on the native <dialog>.
- Tooltip — A short label, with an arrow
- Sidebar — The column beside the chat.
- App Header — The bar above the chat.
- App Shell — Sidebar beside, header above, the chat in the rest.
- Split — Two panes and a draggable seam.