Primitives
84 theme-aware building blocks. Every specimen renders the shipped component — switch the theme and the whole page follows.
Accordion
Vertically stacked collapsibles with single or multiple open items.
@general-design-company/internal-ui/components/primitives/accordionAlert
Inline status message with title and description slots.
@general-design-company/internal-ui/components/primitives/alertAlertDialog
Modal interruption for destructive confirmations. No outside dismiss.
@general-design-company/internal-ui/components/primitives/alert-dialogAspectRatio
Fixed-ratio box for media and previews.
@general-design-company/internal-ui/components/primitives/aspect-ratioAvatar
Image with initials fallback. One shape everywhere an agent or person appears.
@general-design-company/internal-ui/components/primitives/avatarBackground
The pixelated desert wallpaper. `white` and `black` are the theme pair — the default scene follows the theme; the other three are opt-in by name.
@general-design-company/internal-ui/components/primitives/background
Badge
Small status or category chip. Variants carry the meaning.
@general-design-company/internal-ui/components/primitives/badgeCalendar
Month grid for picking dates. Backs the DatePicker popup.
@general-design-company/internal-ui/components/primitives/calendarCard
The one card style. Showcase pages compose it, never restyle it.
@general-design-company/internal-ui/components/primitives/cardCarousel
Embla-backed slides with previous/next controls.
@general-design-company/internal-ui/components/primitives/carouselChart
Recharts with theme tokens. Config maps series to chart-N hues.
@general-design-company/internal-ui/components/primitives/chartCheckbox
Binary control with the theme's control border. Always pair with a Label.
@general-design-company/internal-ui/components/primitives/checkboxClickableCard
A Card that renders as a link (href) or a button (onClick), with hover/active surface steps.
@general-design-company/internal-ui/components/primitives/clickable-cardCollapsible
Single show/hide region. Accordion is stacks of these.
@general-design-company/internal-ui/components/primitives/collapsibleColorContrast
Live WCAG ratio with pass badge. Render inside a ColorSwatch so it reads the base color.
@general-design-company/internal-ui/components/primitives/color-contrastColorPalette
A ladder of color stops with optional labels. See Foundations for the live palette.
@general-design-company/internal-ui/components/primitives/color-paletteColorPicker
Batteries-included color popover. The drop-in replacement for <input type=color>.
@general-design-company/internal-ui/components/primitives/color-pickerColorSwatch
A color block with positioned overlay slots for labels and badges.
@general-design-company/internal-ui/components/primitives/color-swatchCombobox
Base-UI autocomplete with input group, popup list, and mobile sheet presentation.
@general-design-company/internal-ui/components/primitives/comboboxComboboxTrigger
The simple trigger button for hand-rolled popups. Wears the shared trigger face.
@general-design-company/internal-ui/components/primitives/combobox-triggerCommand
cmdk command menu: input, list, groups, and empty state.
@general-design-company/internal-ui/components/primitives/commandDatePicker
Calendar popup in field chrome. Empty reads --/--/--, muted, with no icon.
@general-design-company/internal-ui/components/primitives/date-pickerDialog
Centered modal with header, footer, and focus restoration.
@general-design-company/internal-ui/components/primitives/dialogDialogForm
A real <form> for dialog bodies. Cmd/Ctrl+Enter submits; plain Enter in a textarea stays a newline. Promoted from the console.
@general-design-company/internal-ui/components/primitives/dialog-formDirection
RTL/LTR provider and hook. Flip a region to prove mirroring holds.
@general-design-company/internal-ui/components/primitives/directionThe button docks to the inline-start side automatically.
Drawer
Bottom sheet for touch; anchored popover content on desktop via the shared sheet layer.
@general-design-company/internal-ui/components/primitives/drawerEmpty
Zero-state composition: media, title, description, and an action slot.
@general-design-company/internal-ui/components/primitives/emptyErrorState
Friendly one-liner plus retry plus technical disclosure. Never leaks JSON/SQL/schema. Promoted from the console.
@general-design-company/internal-ui/components/primitives/error-stateTechnical details
relation "tickets" does not exist
Field
Label + control + description/error stack. The shape every form row uses.
@general-design-company/internal-ui/components/primitives/fieldWe never share it.
Form
react-hook-form bindings: FormField wires label, control, description, and message to one id.
@general-design-company/internal-ui/components/primitives/formHighlightedText
Case-insensitive multi-match <mark> highlighter for log lines and preformatted text. Promoted from the console (alias LogLineHighlight).
@general-design-company/internal-ui/components/primitives/highlighted-textHoverCard
Rich hover preview for records, agents, and links.
@general-design-company/internal-ui/components/primitives/hover-cardIconProvider
Sets the default Phosphor weight for a subtree so icons stop declaring it one by one.
@general-design-company/internal-ui/components/primitives/icon-providerInput
Single-line field on the shared resting border. Sizes match buttons.
@general-design-company/internal-ui/components/primitives/inputInfoWrapper
Labelled container: hairline border, label and optional icon top left, formatted value top right, anything below.
@general-design-company/internal-ui/components/primitives/info-wrapperWraps a budget, an account, a card group, or a row of stat tiles.
InputGroup
Input with addons: leading icons, trailing buttons, and prefix/suffix text.
@general-design-company/internal-ui/components/primitives/input-groupInputOTP
One-time-code slots with caret, separator support, and paste handling.
@general-design-company/internal-ui/components/primitives/input-otpItem
List-row composition: media, title/description content, and trailing actions.
@general-design-company/internal-ui/components/primitives/itemUpdated 2h ago
Kbd
Keyboard glyphs, alone or grouped. The dialog submit button wears these.
@general-design-company/internal-ui/components/primitives/kbdLabel
Form label bound to a control by htmlFor. Never a bare <span>.
@general-design-company/internal-ui/components/primitives/labelNativeSelect
The platform <select> in kit chrome. Reaches for this when custom popups buy nothing.
@general-design-company/internal-ui/components/primitives/native-selectPageHeader
Responsive title + leading/after-title slots left, actions right. Promoted from the console.
@general-design-company/internal-ui/components/primitives/page-headerUI kit
204 specimens, one page at a time.
Pagination
Page links with previous/next and ellipsis for long runs.
@general-design-company/internal-ui/components/primitives/paginationPerspectiveBook
3D book that opens on click, with header/title/description slots for the cover.
@general-design-company/internal-ui/components/primitives/perspective-bookLeft page content.
Right page content.
Internal UI
Click to open.
Popover
Anchored floating panel for pickers, filters, and small forms.
@general-design-company/internal-ui/components/primitives/popoverProgress
Determinate bar for uploads, builds, and multi-step flows.
@general-design-company/internal-ui/components/primitives/progressPromptLoading
Terminal-native pending line: $ plus braille spinner plus blink caret. Promoted from the console.
@general-design-company/internal-ui/components/primitives/prompt-loadingRadioGroup
Single-choice control with the theme's control border.
@general-design-company/internal-ui/components/primitives/radio-groupRecordLink
The router seam: routed link when a RecordLinkProvider is mounted, plain anchor otherwise. Promoted from the console.
@general-design-company/internal-ui/components/primitives/record-linkResizable
Drag-to-resize panel groups with keyboard-accessible handles.
@general-design-company/internal-ui/components/primitives/resizableScrollArea
Themed scrollbars for dense panels and dropdowns.
@general-design-company/internal-ui/components/primitives/scroll-areaSelect
Single-choice dropdown. The trigger wears the shared trigger face.
@general-design-company/internal-ui/components/primitives/selectSeparator
Hairline rule, horizontal or vertical, with spacing built in.
@general-design-company/internal-ui/components/primitives/separatorAbove
Below
Sheet
Edge-anchored panel for detail views and inspectors.
@general-design-company/internal-ui/components/primitives/sheetSkeleton
Pulse placeholder that reserves layout while content loads.
@general-design-company/internal-ui/components/primitives/skeletonSkeletonSwap
Skeleton with delayed paint and minimum hold, so fast loads never blink.
@general-design-company/internal-ui/components/primitives/skeleton-swapThe content arrived. Flip back to see the skeleton hold.
Slider
Single or range slider on the theme track.
@general-design-company/internal-ui/components/primitives/sliderSonner
Sonner-powered toaster. Fire with toast() from the sonner package.
@general-design-company/internal-ui/components/primitives/sonnerSpinner
Row-level spinner for buttons and inline pending states. Route-level pending uses PromptLoading.
@general-design-company/internal-ui/components/primitives/spinnerStatTile
Labelled KPI number on a Card. Promoted from the console after its third duplication.
@general-design-company/internal-ui/components/primitives/stat-tile204
and counting
12
None
fully public
Switch
Binary toggle with the theme's control border.
@general-design-company/internal-ui/components/primitives/switchTable
Uncontrolled data table: header, body, footer, caption. Reach for DataTable for sorting/filtering.
@general-design-company/internal-ui/components/primitives/table| Name | Role | Shipped |
|---|---|---|
| Ada Lovelace | Engineer | 1843 |
| Grace Hopper | Admiral | 1952 |
Tabs
Tabbed regions with underline (line) and pill variants.
@general-design-company/internal-ui/components/primitives/tabsTextarea
Multi-line field. Plain Enter stays a newline; DialogForm adds Cmd+Enter submit.
@general-design-company/internal-ui/components/primitives/textareaToast
Radix toast primitives plus the useToast queue hook. The Toaster below renders the queue.
@general-design-company/internal-ui/components/primitives/toastToaster
Mount once at the app root. Renders the useToast queue; fire with toast().
@general-design-company/internal-ui/components/primitives/toasterToggle
Pressed-state button for bold/italic-style formatting controls.
@general-design-company/internal-ui/components/primitives/toggleToggleGroup
Single or multiple pressed toggles sharing one border.
@general-design-company/internal-ui/components/primitives/toggle-groupToken
Clickable design-token chips with value tooltips. The Foundations page is built on these.
@general-design-company/internal-ui/components/primitives/tokenTooltip
Hover hint for icon buttons and truncated labels.
@general-design-company/internal-ui/components/primitives/tooltipTriggerFace
The closed face every picker wears: border, radius, padding, caret. Consume as classes, not a component.
@general-design-company/internal-ui/components/primitives/trigger-faceValueFlash
Number that pops green/red when its value moves. Honors reduced motion.
@general-design-company/internal-ui/components/primitives/value-flash