Skip to content
aparté

UI Kit for an AI Chat App — plain CSS classes, 25 families

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 --aparte-avatar-size is NOT invented here: it already exists centrally for the message avatar (bubble.css), and this c
  • Icon — The icon. Every glyph the library draws carries this class.
  • Badge — Small count or status pill Two axes like the button’s: an intent says what it means, a fill says how loudly.
  • Tag — A removable chip
  • Thumbnail — The thumbnail. A media tile: a fixed square that clips whatever is dropped into it, with room for a control in a corner.
  • Spinner — A rotating indicator
  • Progress — Determinate bar + indeterminate variant The consumer owns the ARIA: role=“progressbar” plus aria-valuenow/min/max on the determinate form, and aria-valuetext (o
  • Skeleton — A loading placeholder Decorative: give the element aria-hidden=“true” (or wrap the group behind a single aria-busy region) so a screen reader does not read out an empty box.
  • Divider — Horizontal, vertical, optionally labelled The line is a BORDER, not a background — see the progress bar’s comment above for why: a background disappears under forced-colors, a border does not.
  • Alert — A callout
  • Card — A surface with optional header/body/footer
  • Kbd — A keyboard key The monospace stack is —aparte-code-font-family, reused rather than declared again: it is already the library’s one answer to “what font is code
  • Mark — The mark: a row a list has settled on.

Surfaces

Section titled “Surfaces”
  • Tabs — One row of tabs, and the panel under it Two looks, one behaviour.
  • Accordion — Stacked disclosures A column of items, each a header you press and a panel it reveals.
  • Menu — A floating list of commands The surface a dropdown, a context menu or an overflow menu is drawn on: a bordered, elevated column of rows.
  • Popover — A floating box, and nothing else Deliberately just a box.
  • Dialog — A modal, drawn on the native <dialog>.
  • Tooltip — A short label, with an arrow A tooltip has to be legible against whatever it happens to sit on top of — a bright image, a dark code block, either app theme — so

Shell

Section titled “Shell”
  • 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.