Components

Carbon's AI surface marker. Used to indicate a UI region where AI assistance is active (suggestions, generated text, automated decisions). Renders a sparkle glyph on a tinted background.

Wraps Radix AlertDialog (role="alertdialog"). Use for destructive confirmations and error acknowledgements where the user MUST decide before continuing. Cannot be dismissed by clicking the scrim or pressing Escape — only by an action button.

Carbon's AspectRatio. A token-free, dependency-free wrapper that locks children to a fixed width-to-height ratio via the modern CSS `aspect-ratio` property.

User / entity avatar. Wraps Radix Avatar primitives so image loading fails over to a fallback (text initials, icon, or any node).

Small visual marker for counts, status, or notifications. Carbon doesn't ship Badge as a distinct primitive in @carbon/react v11 (NotificationBadge is the closest). We ship it as a small status pill because consumer apps use it for unread counts, role markers, etc.

Carbon's BadgeIndicator. Number-or-dot badge that overlays a host element (typically a button or icon) — used for notification counts on bell icons, unread-message counts on inbox triggers, and pending-review counts on QC affordances.

Carbon-spec Button re-implementation. Seven kinds × five sizes, plus `asChild` for Radix Slot composition (matches the legacy @avala/ui Button API surface).

Container with header / title / description / content / footer slots. Preserves the legacy @avala/ui Card API surface (Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter) so consumer apps migrate without churn.

Carbon-spec checkbox. Wraps Radix Checkbox for ARIA + keyboard. Adds Carbon's label / helper text / state structure on top.

Carbon-spec inline + block code display with a copy button. Three variants: single — inline single-line code with copy multi — block multi-line code with copy + expand/collapse for >15 lines terminal — block with $-prompt prefix; uses dark-tone styling regardless of theme tone

Copy + CopyButton — primitives.

Carbon's Modal, re-implemented on Radix Dialog. Three sizes (sm / md / lg) matching Carbon's spec. Includes Header / Body / Footer sub-parts so the layout is consistent across consumers.

Carbon's Disclosure, a single collapsible section with a chevron trigger. Sits below Accordion in scope: Accordion is a multi-section pattern with managed open-state across siblings; Disclosure is one standalone section that toggles independently.

Carbon's expressive display scale, sizes 1 through 4. Used for hero copy on marketing surfaces, onboarding splashes, empty-state callouts, and full-screen transitions. Sibling to Heading (productive document outline) and Text (body/label/helper).

Carbon's Menu re-implemented on Radix DropdownMenu. Includes Item, CheckboxItem, RadioItem, Separator, Label, Sub-menu primitives.

Form + FormItem — primitives.

Compound on Label. Adds Carbon's optional/required indicators and an info-tooltip slot. Used as the Field-row label across forms.

Carbon's productive heading scale, levels 1 through 7. Sibling to the Text primitive (which covers body / label / helper / code) and the Display primitive (which covers expressive marketing hero copy).

Token-aware wrapper around `@carbon/icons-react`. Carbon ships ~2000 icons as individual components, each sized via a `size` prop (16 | 20 | 24 | 32). This primitive standardises:

Square Button variant where the only child is an icon. Carbon-spec: same kind matrix as Button, square sizes, requires `aria-label` for accessibility.

Carbon's IconIndicator. A token-coloured Carbon icon + optional label, sized for dense UIs (tables, cards, list rows). Distinct from StatusIndicator (a coloured dot + padded label row) and from the bare Icon primitive (no semantic status colouring).

Input — primitive (compat shim).

Form label. Wraps Radix Label primitive — clicking the label focuses the associated input. Use `htmlFor` to associate.

Carbon-spec text link. Three sizes, two visual variants (default, inline). Renders `<a>` by default; use `asChild` to pass through to Next.js `<Link>` or React Router.

Loading + InlineLoading — primitives.

Wraps Radix NavigationMenu. Used for top-level site navigation with dropdown menus (header nav, mega menus). Preserves the legacy @avala/ui NavigationMenu API surface for marketing-site migration.

TextInput with a built-in show/hide toggle. Carbon spec.

Wraps Radix Popover. Carbon-spec sizing, animation, focus management.

Carbon-spec linear progress indicator. Determinate (with explicit value) or indeterminate (animated stripe). Supports an inline label + helper text + status (active/finished/error).

RadioButton + RadioButtonGroup — primitives.

Specialized text input with magnifying glass icon and clear button. Carbon-spec.

Carbon-spec form-control select. Wraps Radix Select for ARIA and keyboard. Carbon's surrounding label / helper-text / state structure applied via a top-level wrapper component.

Wraps Radix Separator. Horizontal (default) or vertical. Used to visually divide content. Decorative by default; pass `decorative={false}` for screen-reader-meaningful dividers.

Carbon's ShapeIndicator. A token-driven shape (circle / square / triangle / diamond) + optional label, conveying state in dense UIs where a full StatusIndicator (a dot + padded label row) is too heavy.

Slide-out panel. Wraps Radix Dialog with side-aware positioning. Preserves the legacy @avala/ui Sheet API surface so consumer apps (mission_control sidebar, marketing mobile nav) migrate without churn.

Carbon ships three skeletons: Skeleton — base wrapper around any shape (block, circle, etc.) SkeletonText — pulsing horizontal lines for text placeholders SkeletonPlaceholder — fillable rectangle for image / chart placeholders

Carbon-spec slider. Wraps Radix Slider for ARIA + keyboard. Carbon's surrounding label / value-input / min-max-labels structure rendered around the Radix root.

Carbon's content-summary chip. A short metadata tag shown alongside a primary entity (table row, list item, button) — typically a status count, version, or short identifier. Distinct from Tag (Tag is a categorical label) and Badge (Badge is a status pill).

Compact iOS-style on/off switch. Distinct from Toggle (which is the labeled form-field variant with explicit Off / On text). Switch is used as a row affordance, often with the label as a separate <label> adjacent to it.

Carbon-spec Tabs. Wraps Radix Tabs. Two visual variants: line — Carbon's default; underlined active tab. contained — Filled active tab; used in nested contexts.

Carbon-spec Tag. Used for categorical metadata (labels, filters, statuses). Four variants × ten color tones × three sizes.

Carbon's Text component, re-implemented as a polymorphic typography primitive for body / label / helper copy. Headings live in ./heading.tsx; this primitive covers everything that isn't a heading.

Multi-line variant of TextInput. Same Carbon-spec contract: built-in label, helper text, validation states, sizes.

Carbon-spec text input with built-in label, helper text, and validation states (error / warning / success / read-only / disabled).

ThemeScope + IdPrefix providers — primitives.

Carbon-spec Tile. Five variants: Tile — base, non-interactive ClickableTile — entire tile is a button / link, hover affordance SelectableTile — checkbox-like tile, aria-pressed for state ExpandableTile — accordion-like tile with show-more affordance RadioTile — radio-group option styled as a tile

Carbon's Toggle component. Distinct from Switch in spec: Toggle has inline ON / OFF text labels and is used for binary settings tied to a label (e.g. "Notifications: Enabled / Disabled"). Switch is the compact iOS-style affordance.

Carbon's Toggletip, re-implemented on Radix Popover. Like Tooltip but click- or focus-triggered, persistent (doesn't close on pointer-leave), and may hold rich content (icons, links, code).

Wraps Radix Tooltip. Carbon-spec sizing + positioning + animation.

Carbon-spec accordion. Wraps Radix Accordion. Single or multiple expanded items, with a chevron that rotates on open.

Carbon-spec breadcrumb navigation. Renders a list of links with chevron separators, with the current page rendered as plain text (aria-current).

Carbon-spec single-select with free-text filtering. Built on cmdk + Popover. Distinct from Select (no free-text) and MultiSelect (multi).

⌘K-style global command palette. Mission Control uses one for navigation, dataset jumps, task lookups. Carbon doesn't ship one formally but the pattern is widely copied. We build on cmdk + Dialog so it slots into any consuming app.

Carbon-spec ContentSwitcher. Two or more equal-weight options where exactly one is selected at a time. Visually distinct from Tabs (which implies a panel below). Wraps Radix ToggleGroup type="single".

Carbon-spec data table re-implemented on TanStack Table (headless, MIT) for state management. Supports: - Sortable columns - Column filtering (per-column or global) - Multi-row selection (with batch actions toolbar) - Sticky header - Virtualized rows via TanStack Virtual (for million-row workloads) - Three sizes (sm/md/lg) - Loading + empty states

Carbon-spec date picker. Wraps react-day-picker for the calendar grid + Popover for the dropdown surface. TextInput for the trigger.

Carbon-spec file uploader. Three sub-components: FileUploader — wrapper that manages files state FileUploaderButton — button-style trigger (no drop area) FileUploaderDropContainer — drag-drop area (the canonical Carbon look) FileUploaderItem — per-file row showing name, size, status, delete

Carbon-spec compositional primitives that don't render their own meaningful chrome but enforce structural rules:

Carbon-spec multi-select dropdown. Built on top of cmdk for filtering + Popover for the dropdown surface. Selected items shown as Tags inside the trigger.

Carbon ships several notification variants: InlineNotification — embedded in a page section, dismissable. ToastNotification — floating, auto-dismiss after timeout. ActionableNotification— with a primary action button. StackedNotification — list-style notifications for a notification center. NotificationButton — close button used inside any of the above.

Carbon-spec number input. Adds increment/decrement buttons + numeric validation on top of TextInput. Step + min + max + precision wired to keyboard arrows.

Carbon-spec overflow menu. The "kebab" / "more" trigger that opens a DropdownMenu. Used in table rows, card headers, and toolbars where secondary actions need to live behind a single icon.

Carbon-spec pagination control. Page-size dropdown + range label + prev/next/first/last buttons. For pure page-number nav, see PaginationNav.

ProgressIndicator + ProgressStep — pattern.

Carbon-spec status indicator. Shows a colored dot + optional label for entity status (active / idle / error / unknown / etc.).

Carbon-spec structured list. A row+cell list-like structure used for key-value or comparison lists. Lighter than DataTable (no sort, no filter, no virtualization). Supports optional radio selection mode.

TreeView + TreeNode — pattern.

Preserves the legacy @avala/ui AdminSidebar API surface so consumer apps (mission_control admin, learning admin, pay admin, etc.) migrate with a one-line import swap. Built on UIShellSideNav under the hood.

Top app header, intended for use either inside UIShell or standalone (marketing site nav). Preserves legacy @avala/ui Header API surface.

PageLayout / PageContainer / PageHeader — patterns.

Preserves legacy @avala/ui SplitLoginPage. Two-column login template: left side hero/marketing content, right side login form. Mobile collapses to single column with the form first.

KPI / metric display card. Preserves legacy @avala/ui StatsCard API. Renders a label, a primary value (large tabular-nums), an optional delta with up/down/neutral trend coloring, and an optional secondary description.

UIShell — Carbon's app-shell composite.

Whether confetti is active

—

—

Color of the dot - can be a CSS color or Tailwind class

—

Base sphere color