Every component in the Docs Kit is a pure TypeScript function that returns an HTML string; interaction is attached at runtime by initCelestialUI() through data-cpd-* hooks. All exports come from src/lib/ui/index.ts.

Each page in this section documents one component: a live preview of its different states, the builder call that produced it, a props table and notes.

The component gallery

Callout

Five semantic notice variants.

Cards

Responsive link-card grid.

Steps

Numbered procedure list.

Tabs

Tab panels with labels.

Accordion

Collapsible sections.

Files

File-tree explorer.

Breadcrumb

Trail of page ancestors.

Pagination

Previous / next cards.

CodeBlock

Framed code with copy button.

Heading

Anchored headings with copy-link.

Badge

Six semantic variants.

Kbd

Keyboard key chip.

Button

Buttons, six variants and three sizes.

Link

Text links with arrow markers.

Dropdown

Menu with groups and separators.

Drawer

Slide-in panel below the nav.

Modal

Overlay dialog with blurred backdrop.

Runtime

initCelestialUI() attaches all interactions via event delegation — call it once after the DOM is ready:

import { initCelestialUI } from '/src/lib/ui/runtime';
initCelestialUI();

It wires sidebar folders/collapse/drawer, ClerkTOC tracking, tabs, accordions, copy buttons and the theme toggle. It is idempotent and safe to call on any page (no-ops when no cpd- elements exist). On the docs site it is injected into every page by the celestialUiRuntime integration in astro.config.mjs.

See Styles for the design tokens and src/lib/ui/tokens.ts.