Components
Compare two implementations that consume the same @ghds/tokens — a React
component and a Lit web component — side by side on one screen. Color, spacing, radius, and
typography come from the tokens, and the hand-drawn outlines come from
@ghds/sketch-core. Toggle dark mode in the top-right corner and both respond
identically.
React @ghds/react
Button
Input
Card
Lit @ghds/web-components
Button
Input
Card
Default sketch outline, no elevation.
Drop-shadow sketch outline suggests elevation.
Cross-Framework, Single Token Source
The two columns use different runtimes (React's virtual DOM vs. native custom elements), but the visual result is identical. This is why tokens are kept as the single source of truth — change a value in one place, and every framework changes with it.
Component Documentation
Anatomy, variants & states, accessibility, props, and a live demo for each component:
- Accordion — collapsible sections (single or multiple open)
- Alert — an inline status banner in four severities
- Avatar — a circular image with an initials fallback
- Badge — a small status/label pill in six semantic variants
- Breadcrumb — a navigation trail to the current page
- Button — variants, states, accessibility, and props
- Card — a generic hand-drawn surface container
- Input — a labeled text field with an error state
- Menu — a dropdown of actions triggered by a button
- Modal — a focus-trapping dialog with a scrim
- Pagination — a pager for splitting long lists across numbered pages
- Progress — a determinate/indeterminate progress bar
- Textarea — a multi-line text field with an opt-in auto-resize
- Toast — a transient, auto-dismissing notification
- Tooltip — a short hint revealed on hover or focus
- Checkbox — boolean input with an indeterminate state, plus CheckboxGroup
- Radio — single-selection input, used inside RadioGroup
- Switch — an immediate on/off toggle
- Table — a data table with sortable headers and row selection
- Tabs — switch between related panels with keyboard-navigable tabs
- Select — a single-select dropdown with a hand-implemented listbox
- Skeleton — a loading placeholder that pulses while content loads
- Slider — a range input with a hand-drawn rail and thumb
- Spinner — an indeterminate loading indicator that respects reduced motion
- FormField — a Label + HelperText + ErrorText composition wrapper
- AspectRatio — a layout box that holds media at a fixed width-to-height ratio
- Direction — an LTR/RTL context provider and useDirection hook
- Item — a flexible list row with media, content, and actions slots
- InputGroup — an input with leading/trailing addons in one sketchy box
- ScrollArea — a bounded scroll viewport with a sketchy border and themed scrollbar
- InputOTP — a segmented one-time-code field with sequential entry and paste distribution
- NativeSelect — a hand-drawn box around a real native select, with a chevron and error state
- Carousel — a scroll-snap slideshow with prev/next controls
- Resizable — a split view with drag- and keyboard-resizable panels
- Marker — a hand-drawn inline highlighter in four tones
- Attachment — a file chip with an icon, metadata, and remove button
- Bubble — a chat bubble in a received or sent variant
- Message — a chat row with avatar, author, timestamp, and bubble
- MessageScroller — an auto-sticking chat log bounded by maxHeight
- Accessibility Guide — keyboard interaction, focus management, and ARIA patterns shared across all components