Components
23 pagesEvery component applies brand-css classes and adds only interactivity, typing, and accessibility. The visual styles live entirely in CSS.
AppShell
Application frame with topbar, grouped sidebar nav, skip link, responsive drawer, and main region.
Button
Primary, secondary, ghost, danger variants with sizes and loading state.
CodeBlock
Syntax-highlighted pre block with copy-to-clipboard and terminal chrome.
Card & CardGrid
Surface card with kicker, title, body. Auto-fit grid layout.
Note
Callout box in violet or coral, with optional bold title.
SectionHeader
Section divider with number, title, and tag. Configurable heading level.
Avatar
User/entity avatar primitive with initials, image fallback, sizes, and status examples.
Breadcrumbs
Hierarchical page trail with aria-current and compact separator styling.
EmptyState
Purposeful blank-state panel with icon slot, message, and action affordance.
Icon
Token-aligned icon rendering for product UI, documentation, and status examples.
Skeleton
Reduced-motion-aware loading placeholders for text, media, cards, and tables.
Tag
Compact semantic labels for status, metadata, and inline classification.
Term
Inline definition tooltip on hover, focus, and tap. Dismissible.
Tooltip
Accessible contextual hint with hover/focus disclosure and keyboard dismissal.
Tabs
Roving tabindex, arrow-key navigation, ARIA tab pattern.
Menu
Keyboard-friendly action menu with roving focus, Escape handling, and placement examples.
Pagination
Page navigation control with current-page state, disabled controls, and accessible labels.
ReadingToolbar
Bottom-right reading UI: font-size, section nav, scroll-spy, expand panel.
ThemeToggle
Light/dark toggle. Writes data-theme, persists to localStorage, no FOUC.
Table
Accessible data table with caption, sortable headers, aria-sort, and responsive scroll region.
Form
Field wrapper plus Input, Textarea, Select, Checkbox, RadioGroup, and Switch primitives.
Modal
Dialog with aria-modal, focus trap, escape handling, scroll lock, and focus restore.
Toast
ToastProvider and useToast with polite/assertive live regions and auto-dismiss.