Components
68 components, each with its examples, usage rules and source.
- AccordionSections that open in place: 14px ink labels with a caret at the right, ruled by the faint lilac line.
- AlertThe vault box on the lilac, the pale cyan info note, the sand warning banner with a note at the right, and a red error.
- Alert DialogThe console's dialog for a question that must be answered: title, a secondary line and two pills.
- Aspect RatioA frame that holds media at a fixed shape.
- AttachmentA white file card with the field edge: the file in a pink tile, its name in 14px medium ink and its size in IBM Plex Mono.
- AvatarThe rail's 22px blue initial tile with 4px corners, and the round agent portrait, with a fallback, status dot and group.
- BadgeThe pink BETA and ADMIN marks, the green Included pill, the pale webhook tags, and the tunnel's status wells.
- BreadcrumbA trail of 14px muted links ending in the current page in ink, with faint carets between.
- BubbleA message bubble: incoming on the lilac, outgoing in the action purple, 16px corners with a 4px tail corner.
- ButtonThe purple pill for the main action, the lilac pill, the white outline key, the soft lilac key, ghost glyphs and text links.
- Button GroupButtons, fields and text segments joined into one bar with shared edges and outer corners only.
- CalendarA month grid of 36px keys: today in purple, selected days as purple keys, a range on a lilac band.
- CardThe white card with the field edge and 8px corners, the raised white panel, and the lilac channel card.
- CarouselA row of slides that snap into place, with white round previous and next keys outside it.
- ChartLine, area, bar and pie charts in SVG with lilac rules, 12px muted labels and a white floating tooltip.
- CheckboxAn 18px box with 4px corners and a gray edge that fills purple with a white check.
- Code BlockThe event catalog's code viewer: a gray head with the language and a copy glyph over an off-white body with line numbers.
- CollapsibleA part that shows and hides in place, opening with its height.
- ComboboxThe select trigger that opens a searchable list, for one value or several shown as lilac chips.
- CommandA search row over grouped 36px results with purple group headings, in a panel or a dialog.
- Context MenuThe dropdown menu's panel and rows, opened with a right click or a long press on an area.
- Data TableThe console's table with a filter field, sortable heads, row checkboxes, a Columns menu and the lilac pagination bar.
- Date PickerThe select trigger with a calendar glyph that opens the calendar in a white panel, for one date or a range, with optional presets.
- DialogA centered white panel with 16px corners over the blurred, ink-tinted page.
- DirectionSets left-to-right or right-to-left for every component inside it.
- DrawerA panel pulled up from the bottom edge with a handle, dragged away with a flick or a pull.
- Dropdown MenuA raised white menu of 36px rows with filled glyphs, lilac highlight, purple section labels and checks.
- EmptyThe centered empty state: the 3D octopus under an arc of glyph circles, a 22px bold title, a short description and a purple pill.
- FieldA field's label, control, description and error stacked 4px apart, fields 12px apart, with the 'or' hairline between two ways in.
- Formreact-hook-form fields laid out as the console's forms: a 14px label, the control, a muted description and a 12px red message.
- Hover CardA raised white preview card that opens after a short pause on a link or handle.
- InputThe 40px field with 8px corners, the lilac-gray edge and a light purple placeholder.
- Input GroupThe console's field with addons inside it: glyphs, text, a lilac suffix segment, buttons, or the handle check's state glyph.
- Input OTPJoined 40px slots in the field's edge with a purple active slot and a blinking caret.
- ItemA row of content: an email in the inbox, a webhook event, or a rail row, washing lilac when hovered or selected.
- KbdA 20px lilac key cap with 4px corners and 12px medium text.
- LabelA field's 14px regular ink label on a 24px line.
- MarkerA 12px muted marker in a conversation or list, alone, between two hairlines, ruled underneath, or as the purple unread line.
- MenubarA lilac tab track of medium triggers whose menus are the dropdown menu's raised panels.
- MessageOne message in a conversation: a 32px avatar tile, the sender and time in 14px, the bubbles, and a 12px muted footer.
- Message ScrollerA conversation's scroll area that opens at the newest message, stays pinned to it as messages arrive, and offers a white Jump to latest pill once the reader scrolls up.
- Native SelectThe browser's own select dressed as the console's: a white 40px field with the Shadow/S ring and an ink caret.
- Navigation MenuNav-row triggers and links with panels that open in a raised white viewport.
- PaginationMuted Previous and Next with carets around ink page numbers; the current page is a white key with Shadow/S.
- PopoverA raised white panel with 8px corners and the floating shadow that grows out of the control that opened it.
- ProgressAn 8px lilac pill track filled with the purple.
- QuestionnaireQuestions asked one at a time: white choice cards with the brand's radio or checkbox and a shortcut key, a typed answer, a progress count and Previous, Skip and Next pills.
- Radio Group18px circles; the chosen one takes a thick pink ring around a white center.
- ResizablePanels split by the console's 1px lilac rule, which can be dragged or moved with the arrow keys.
- Scroll AreaA region that scrolls inside the page with a thin lilac-gray bar.
- SelectA white 40px field with the Shadow/S ring and an ink caret that opens the console's white menu.
- SeparatorA 1px rule in the faint lilac, across or down.
- SheetA white panel that slides from an edge over the blurred, ink-tinted page, with the dialog's title and close glyph.
- SidebarThe console's rail: 288px of white with a hairline edge, the lockup, 38px rows with filled glyphs, purple group labels and a ruled foot; the lilac second rail for an agent's workspace.
- SkeletonA lilac placeholder with 8px corners that breathes softly while content loads.
- SliderA 6px lilac-gray track filled purple to the value, with the switch's white knob.
- SonnerToasts as white floating panels with a filled status glyph, an ink title, a muted description and a purple action.
- SpinnerThe console's turning eight-spoke glyph, in the color of the text around it.
- SwitchA 44 by 24 pill: off gray, purple when on, with a white knob that slides across.
- TableThe console's table: a lilac head with muted labels, a separate white body with Shadow/S and 64px rows, and a lilac foot.
- TabsA lilac track of medium labels; the selected tab is a white key with Shadow/S.
- TextareaThe field's 8px corners and lilac-gray edge around several lines of 14px text, 72px tall to start.
- ToastThe Radix toast API in the same white floating look, with an outline action and a red edge for destructive toasts.
- ToggleA 38px key with a glyph or a medium label that holds the lilac (or turns white in outline) while pressed.
- Toggle GroupThe segmented choice: a lilac track of 38px choices where the chosen one is a white key with Shadow/S.
- TooltipA short ink label with white 13px text, 6px corners and a small arrow.
- TraceAn agent's steps as quiet 14px lines with a glyph, a running step that breathes and steps that open to their detail on a hairline.
- TypographyThe console's type as components: regular titles, 14px body copy, muted lines, lists, quotes and inline keys.