Skip to content

15 app components

Application UI in your colour.

The screens inside a product: chat and agent feeds, a command menu, tables and charts, forms, dialogs, onboarding and boards. Each one reads a single accent variable, so a brand colour (or a Launchpad theme) recolours the whole family at once, in light and dark.

15 items

  • A vertical timeline with two ticked steps, one spinning step and one queued step

    A timeline of what an agent is doing: done steps ticked, the running one spinning, the rest queued.

    AI and agents · Server

  • A chat with an accent-coloured message on the right and grey replies on the left

    A chat conversation: your messages in the accent, replies on a card, and a typing indicator.

    AI and agents · Server

  • A rounded prompt box with a model chip at the bottom left and an accent send button

    A prompt box that grows with its text, with a model chip and a send button that wakes when there is text.

    AI and agents · CSS

  • A collapsed card with a tool name, a status dot and a chevron, opening to arguments and a result

    A tool call an agent made: name and status on a line, arguments and result under a disclosure.

    AI and agents · Server

  • A sidebar with a brand, grouped links and an accent-highlighted current item

    An app sidebar with a brand, titled groups of links, badges and the current page in the accent.

    Navigation · Server

  • A search field above a list of commands with one highlighted and shortcut keys at the right

    A command palette: type to filter, arrows to move, Enter to run, with shortcut hints.

    Navigation · CSS

  • A list of people with accent monograms, short activity sentences and times

    A list of who did what and when, with initials in the accent.

    Data · Server

  • A smooth rising area chart in a blue gradient with faint gridlines and month labels

    A smooth area chart in your accent with gridlines, a marked last point and axis labels, in plain SVG.

    Data · Server

  • A table of invoices with client, service, date, amount and a status pill

    A data table with a caption, aligned numbers and status pills, scrolling sideways inside its frame.

    Data · Server

  • Three stat cards with a label, a large number, a green change and a small area sparkline

    Headline number cards with a change and a sparkline in the accent.

    Data · Server

  • A settings card with a name field, three toggle switches with help text and a save button

    A settings panel with a text field and labelled switches with help text, and a Save button.

    Forms · CSS

  • A modal dialog with a heading, a sentence, a Keep it button and a red Cancel booking button

    A confirmation on the native dialog: focus trapped, Escape closes, a clear cancel and a destructive confirm.

    Overlays · CSS

  • Two notice cards with an accent dot, a title, a line and a close button

    A stack of dismissible notices in a polite live region, with an accent marker.

    Overlays · CSS

  • A card titled Get set up with a progress bar and four tasks, one ticked

    A first-run checklist with a progress bar and tickable tasks, each with a hint.

    Onboarding · CSS

  • A board with four columns of cards, tags in blue and small round assignee badges

    A kanban board of titled columns with counts and cards with a tag and an assignee.

    Workflows · Server

↑ ↓ to move↵ to openesc to close