Gallery

Gallery

Every item in the registry, in every brand theme. Pick a theme at the top right.

Tokens

  • TokensColours, type scale, radii, control heights and shadows every item reads; neutral defaults on :root.

Themes

  • Trackable themeNavy actions, the orange mark, slate neutrals, Inter (Geist Mono for code, from the tokens).
  • SkillDecks themeNear-black actions, the red accent, cool greys, Inter Tight headings.
  • BetterMarketer themeWarm near-black actions, the amber accent, warm greys, Archivo headings.

Primitives

  • Accordionshadcn Accordion, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Alertshadcn Alert, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Alert dialogshadcn Alert dialog, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Avatarshadcn Avatar, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Badgeshadcn Badge, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Breadcrumbshadcn Breadcrumb, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Buttonshadcn Button, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Button groupshadcn Button group, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Calendarshadcn Calendar, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Cardshadcn Card, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Chartshadcn Chart, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Checkboxshadcn Checkbox, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Collapsibleshadcn Collapsible, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Commandshadcn Command, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Dialogshadcn Dialog, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Dropdown menushadcn Dropdown menu, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Emptyshadcn Empty, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Fieldshadcn Field, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Hover cardshadcn Hover card, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Inputshadcn Input, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Input groupshadcn Input group, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Itemshadcn Item, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Kbdshadcn Kbd, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Labelshadcn Label, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Native selectshadcn Native select, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Paginationshadcn Pagination, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Popovershadcn Popover, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Progressshadcn Progress, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Radio groupshadcn Radio group, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Scroll areashadcn Scroll area, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Selectshadcn Select, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Separatorshadcn Separator, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Sheetshadcn Sheet, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Sidebarshadcn Sidebar, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Skeletonshadcn Skeleton, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Sonnershadcn Sonner, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Spinnershadcn Spinner, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Switchshadcn Switch, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Tableshadcn Table, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Tabsshadcn Tabs, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Textareashadcn Textarea, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Toggleshadcn Toggle, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Toggle groupshadcn Toggle group, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.
  • Tooltipshadcn Tooltip, stock (radix-vega, shadcn CLI 4.23.0), styled by the tokens.

Page parts

  • StatusThe one set of status tones: icon and word inline, or a shadcn Badge tinted by the tone.
  • KPI tileA figure, its sparkline and its change against the period before, coloured by whether that way is good.
  • Copy buttonCopies, says so, and selects the text when the browser refuses (so Ctrl+C still works).
  • Code blockA snippet to copy: Geist Mono, scrolls sideways, never breaks mid-token, with the copy button.
  • Confirm (useConfirm)Ask before an action with one await: const ok = await confirm({ … }).
  • Page frameThe page column (width by page type), the header (title, one line, one primary action, the way back, tabs and their actions) and NavTabs for link tabs.
  • App shellshadcn Sidebar with a switcher, search (⌘K), groups that fold, the user menu; folds to icons (⌘B); a sheet on phones.
  • Resource listA list with a rail (usage, help) that stays in view from xl.
  • Settings section and rowA Card per section; one setting per row as a responsive Field: label and hint left, control right.
  • Save barThe one save model: docked, "Saved" / "Published vN" / "Unsaved changes" with Undo and Save; the leave guard; useDirtyForm.
  • Data tableshadcn's data-table recipe on TanStack Table: sorting, columns menu, selection with a bulk bar, row menus, paging.
  • Filter barOne row above a list: search, filters, range; applies at once; Clear filters while filtered.
  • Danger zone and deleteThe settings page's last card, and the delete dialog where the name must be typed.
  • File dropDrop or choose a file; see it; see why one was refused. Sets a real file input.
  • Chart cardA chart in a card on shadcn's Chart, with the period's figure and change.
  • Detail layoutMain column and a side column; side Cards; label and value rows; previous and next record (J/K).
  • Wizard frameOne step per screen: Step n of m with a Progress, one Card, Back and the one primary action.

Page types

  • Overview pageStarting point: what needs attention, four KPI tiles with change, the main chart and two ranked lists.
  • List pageStarting point: one primary action, a filter row, the table with row menus and paging, and a usage rail.
  • Detail pageStarting point: back to the list, previous/next, the facts, what happened in order, and a side column.
  • Settings pageStarting point: tabs on a track, one setting per row in ~900 px, one docked save bar, the danger zone last.
  • Wizard pageStarting point: one step of a set-up, choices as cards, Back and one primary action.
  • Editor pageStarting point: settings on the left, a live preview with a device switch on the right, the docked save bar.

Helpers

  • cn()Joins class names; a later Tailwind class wins over an earlier one.
  • Copy helperscopyText() answers whether the text reached the clipboard; selectContents() selects it for copying by hand. Ours (trackable-cmp).
  • describeDelta()How a figure moved against the period before, good or bad by goodWhen; no "+100%" from nought. Ours (trackable-cmp, call tracking).