Components

Examples

Components are proven in pairs before they are trusted in products. These compositions run the bundled blocks against each other, from a single seam to complete little screens, every one rendered live by the Interactivity API.

Pairs

Two or three components on one seam, each proving an interaction the parts must get right together.

Select in a dialog A select opens its listbox inside a modal and the popup overlays the trigger instead of escaping to the page behind it, the seam a positioning regression once broke. Menu in a dialog A kebab menu opens above dialog content and claims the first Escape press without taking the dialog down with it. Combobox in a dialog A combobox filters teammates inside a modal while its floating option list overlays the dialog instead of clipping at its edge. Select in a drawer A select opens inside a sliding side panel and its listbox tracks the trigger after the drawer has settled into place. Tooltip on icon button A tooltip gives an icon-sm button the label its glyph alone cannot carry. Badge with explanation A status badge gets a hover explanation from a tooltip beside it, since the tooltip block renders its own button and cannot wrap the badge. Popover calendar A calendar sits inside a popover for schedule-later flows, proving a full date grid can live in an anchored popup. File context menu Right clicking a file row opens its actions at the pointer instead of a fixed anchor. Confirm inside a drawer A destructive confirmation opens as a modal layer above an open drawer, dimming the drawer itself rather than just the page. Toast after submit Submitting a small form queues a confirmation toast, shown here in the moment just after a successful save. Preview card in table Hovering an owner cell raises a profile preview without disturbing the table layout around it. Menu inside a drawer A kebab menu anchors correctly inside a transformed drawer panel, the classic fixed-positioning trap. Select filters a table Choosing an environment in the header select narrows the deployment table below it without a reload. OTP in a dialog A one-time code entry proves segmented inputs, paste handling and focus order all survive inside a modal.

Patterns

Recognisable product patterns built from a handful of components.

Create account card The canonical signup card: social sign-in first, a quiet divider, then email, password and one full-width primary. Payment method card A payment form with a method radio, card details and a three-up expiry row, shown with Card selected since the radio group drives no conditional panels. Cookie settings card Three labelled switch rows split by hairline separators, closed by a Cancel and Save footer. Report an issue The support-form staple: two selects sharing one row, a subject, a long description and a Cancel and Submit footer. Team members card A roster of avatar rows where each member carries an inline role select aligned to the row end. Share document card A copyable share link above a people list where a compact select sets the permission for each person. Notification settings card Four checkbox rows pair a short label with a one-line description, closed by a single full-width primary. Command menu The command palette rebuilt honestly: a dialog hands focus to a combobox whose floating filtered list opens under the input rather than as an inline command list. Data table with menus A payments table led by a filter input and a column menu, with exactly one ghost kebab closing each row. Paged invoices table A paged invoice table whose footer pairs a result count with numbered pagination and a collapsed middle. Booking date card A booking card adapted honestly: the calendar picks the check in day and a select supplies the length, since the calendar block is single-date rather than range. Upload with progress An upload flow snapshotted mid-transfer, where a static progress value stands in for the live bar and a toast confirms the file that just finished. Setup wizard A three-step wizard where tabs act as the stepper and a progress bar tracks position, with Back and Continue spread across each panel foot. Profile header A profile header with identity on the left and exactly two weighted actions on the right, outline before the one primary. Invite teammate dialog A create-flavored dialog form whose footer reads Cancel then Send, with role guidance sitting under the select. Keyboard shortcuts dialog A reference dialog that lays shortcut pairs into a two-column table of kbd chips.

Mini apps

Complete little screens, the way the components ship inside real products.

Project creation flow A full create screen: breadcrumb, page heading and a card form of name, framework, region, visibility and seed data ending in Cancel and Create. Team management The whole membership surface: seat count, an invite dialog, one kebab menu per row and a destructive leave confirm at the end. Checkout drawer A full cart drawer with line items, totals, a promo row and a stacked footer that puts Checkout above Continue shopping. Onboarding step An onboarding step with a progress readout, workspace basics, a theme toggle group and Back and Continue spread across the foot. Inbox triage A triage list pairing a sender preview card with one kebab of actions per row and a scope select in the header. Workspace switcher A workspace header joining a switcher menu with a creation dialog, menu for the fast path and form for the new one. Analytics overview A dashboard header where one range select feeds three stat cards and the tab panels beneath them. Support console A support ticket surface: status and assignee up top, the thread in the middle and a reply box with saved replies below. File manager A file browser where the breadcrumb tracks the folder, right click raises folder actions, rows end in kebab menus and a drawer holds file detail. Chat thread card A chat thread adapted honestly, with bubbles as plain cards carrying sender captions since no chat primitive or side alignment exists, an icon-sm send beside the input, and a people-picker dialog off the header.