Primitives
Buttons, badges, links, and panels — the smallest building blocks.
Button Inline action in slate, ghost, and blue variants with two sizes.Badge Square status and metadata chip with filled/outline variants, contrast levels, and a light mode.BadgeGroup Flush strip of badges with one shared surface and hairline dividers between segments — the nav cluster as a component.ControlGroup One flush surface that groups buttons, selects, and inputs into a strip with hairline dividers — the navbar preferences cluster as a component.Link Text link in slate, blue, and muted colors.ExternalButton Button that opens an external resource in a new tab, with an external-link icon.ExternalLink Link with an external-link icon for resources outside the site.NamedValue Two-column label/value row that participates in a parent grid.ScrollArea Themed scroll area with a squared thumb and Lenis-friendly wheel handling.CodeBlock Code panel with a mono toolbar, language label, and copy button.InlineCode Inline code token: Geist Mono in the README amber, for identifiers and values in prose.PropsTable Props reference table in the code-block surface: name, type, default, and description, with an optional note.ColorScales The five Radix scales as a table of click-to-copy swatches, each labelled with its step number.Accordion Stack of toolbar-style headers; the open item drops into a darker code-block panel.Collapsible Disclosure with a custom trigger; the panel animates its height and staggers its content.Dialog Square modal that becomes a bottom-sheet drawer on mobile, with a close icon, title, and description.Tooltip Square hover and focus hint in the default button surface, with an optional arrow.