control/uialpha

An opinionated, customizable superset of shadcn/ui

Create app
PrimitivesAIUse casesSkills
Guides
  • Overview
  • Get started
  • Create a skin
  • Shadcn compatibility
  • Architecture
  • Agent surface
  • Lock-in
  • Theme accessibility
  • Theme AI builder
  • Control UI vs shadcn/ui
  • Best React component libraries for AI interfaces
Skins
  • Skinning Control UI
Layout
  • Aspect ratioBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Dockable PanelExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.
  • Infinite CanvasExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.
  • Morphing PanelExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.
  • ResizableBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Scroll area
  • SidebarBetaBeta — the props contract is close to final, but small breaking changes can still land.
Actions
  • Button
  • Button group
  • Command
  • Context Menu
  • Dropdown Menu
  • Menubar
  • Toggle
  • Toolbar
  • Trigger MenuBetaBeta — the props contract is close to final, but small breaking changes can still land.
Forms
  • Autocomplete
  • CalendarBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Checkbox
  • Checkbox GroupBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Color PickerBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Combobox
  • DropzoneBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Field
  • Form
  • Gradient EditorBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Input
  • Input group
  • Input OTP
  • Native select
  • Number Field
  • Phone inputBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Radio group
  • Select
  • Slider
  • Switch
  • Textarea
Navigation
  • Navigation menu
  • Pagination
  • Stepper
  • Table of contents
  • Tabs
Overlays
  • Alert dialog
  • Dialog
  • Drawer
  • Hover card
  • Popover
  • Responsive dialog
  • Rich tooltip
  • Tooltip
Feedback
  • AlertBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • EmptyBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Progress
  • SkeletonBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Spinner
  • Toast
Display
  • Accordion
  • Avatar
  • BadgeBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • CardBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Code
  • Code Diff
  • Collapsible
  • ItemBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Kbd
  • Markdown
  • Meter
  • Table
  • Timeline
  • Tree
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Composer
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
Utils
  • cn
  • Skin
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  • GitHub11

by Damien Schneider

Primitives

Navigation menu

Site navigation menu with a shared animated viewport.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

NavigationMenu
├── NavigationMenuList
├── NavigationMenuItem
├── NavigationMenuTrigger
├── NavigationMenuContent
├── NavigationMenuLink
└── NavigationMenuViewport

First install and activate one skin. Core deliberately contains no visual token defaults.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/navigation-menu.tsx. Install it on its own with the command above, or inspect the source below.

Registry command
npx shadcn@latest add https://control-ui.dev/r/navigation-menu.json
See registry manifest

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-button-* · 17 knobsHow the cascade resolves
--cui-button-radius<length-percentage>var(--radius-control)
--cui-button-gap<length-percentage>0.375rem
--cui-button-icon<length>1rem
--cui-button-bg<color>transparent
--cui-button-bg-image*none
--cui-button-foreground<color>var(--muted-foreground)
--cui-button-hover-bg<color>oklch(from var(--foreground) l c h / 0.06)
--cui-button-hover-foreground<color>var(--foreground)
--cui-button-press-bg<color>var(--cui-button-hover-bg)
--cui-button-press-scale<number>0.98
--cui-button-active-bg<color>oklch(from var(--foreground) l c h / 0.08)
--cui-button-active-foreground<color>var(--foreground)
--cui-button-active-hover-bg<color>var(--cui-button-active-bg)
--cui-button-shadow*0 0 transparent
--cui-button-hover-shadow*var(--cui-button-shadow)
--cui-button-press-shadow*var(--cui-button-hover-shadow)
--cui-button-active-shadow*var(--cui-button-shadow)
--cui-popup-* · 16 knobsHow the cascade resolves
--cui-popup-radius*var(--radius-popover)
--cui-popup-background<color>var(--popover)
--cui-popup-foreground<color>var(--popover-foreground)
--cui-popup-border-color<color>var(--border)
--cui-popup-border-width<length>1px
--cui-popup-shadow*var(--shadow-pop)
--cui-popup-backdrop-filter*blur(var(--backdrop-blur-popover))
--cui-popup-backdrop-background<color>oklch(from var(--foreground) l c h / var(--overlay-opacity))
--cui-popup-item-radius<length-percentage>var(--radius-popup-item)
--cui-popup-item-foreground<color>var(--foreground)
--cui-popup-item-highlight-background<color>oklch(from var(--foreground) l c h / 0.06)
--cui-popup-item-highlight-foreground<color>var(--cui-popup-item-foreground)
--cui-popup-item-highlight-muted-foreground<color>var(--muted-foreground)
--cui-popup-item-disabled-opacity<number>0.4
--cui-popup-separator-color<color>var(--border)
--cui-popup-shortcut-foreground<color>var(--muted-foreground)

Installed dependencies

Support files installed with this primitive — shared ones arrive once with your first Control UI component. Public dependencies stay linked to their own pages.

Control variantssrc/registry/sources/control-ui/control-variants.tsSupport

Raw code

This primitive's source and the support files it installs with

src/registry/sources/control-ui/ui/navigation-menu.tsx
"use client";
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
import type { ComponentProps, CSSProperties } from "react";
import { buttonGapClass, controlSize } from "@/components/control-ui/control-variants";
import type { ButtonKnobStyle } from "@/components/control-ui/knob-contracts/button-knobs";
import type { PopupKnobStyle } from "@/components/control-ui/knob-contracts/popup-knobs";
import { cn } from "@/components/control-ui/lib/cn";
import { skinEffects, skinId } from "@/components/control-ui/skin";
export type NavigationMenuProps = ComponentProps<"nav"> & {
value?: string | null;
defaultValue?: string | null;
onValueChange?: (value: string | null) => void;
orientation?: "horizontal" | "vertical";
delay?: number;
closeDelay?: number;
} & { style?: CSSProperties & PopupKnobStyle };
export type NavigationMenuListProps = ComponentProps<"ul"> & { style?: CSSProperties & PopupKnobStyle };
export type NavigationMenuItemProps = ComponentProps<"li"> & {
value?: string;
} & { style?: CSSProperties & PopupKnobStyle };
export type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
style?: CSSProperties & ButtonKnobStyle & PopupKnobStyle;
};
export type NavigationMenuContentProps = ComponentProps<"div"> & { style?: CSSProperties & PopupKnobStyle };
export const navigationMenuLinkVariants = ["default", "compact"] as const;
export type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
export type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & { style?: CSSProperties & PopupKnobStyle } & {
active?: boolean;
closeOnClick?: boolean;
variant?: NavigationMenuLinkVariant;
};
export type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & { style?: CSSProperties & PopupKnobStyle };
// Every item has its own Trigger and Content, but single viewport morphs between them rather than one popup per item.
type RefinedLinkProps = NavigationMenuLinkProps & Pick<ComponentProps<typeof NavigationMenuPrimitive.Link>, "render">;
export function NavigationMenu({ className, children, ...props }: NavigationMenuProps) {
return (
<NavigationMenuPrimitive.Root
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="root"
className={cn("relative flex max-w-max flex-1 items-center justify-center", className)}
{...props}
>
{children}
</NavigationMenuPrimitive.Root>
);
}
export function NavigationMenuList({ className, ...props }: NavigationMenuListProps) {
return (
<NavigationMenuPrimitive.List
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="list"
className={cn("flex flex-1 list-none items-center justify-center gap-0.5", className)}
{...props}
/>
);
}
export function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {
return (
<NavigationMenuPrimitive.Item
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="item"
className={cn("relative", className)}
{...props}
/>
);
}
export function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {
return (
<NavigationMenuPrimitive.Trigger
data-control-ui="navigation-menu"
data-control-family="button"
data-slot="trigger"
data-control="true"
data-cursor="default"
data-size="sm"
data-variant="quiet"
data-tone="neutral"
data-shape="default"
className={cn("inline-flex select-none items-center", controlSize({ size: "sm" }), buttonGapClass, className)}
{...props}
>
{children}
<NavigationMenuPrimitive.Icon
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="icon"
>
<svg viewBox="0 0 12 12" className="size-3" aria-hidden="true" fill="none">
<path d="M3 4.5 6 7.5 9 4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</NavigationMenuPrimitive.Icon>
</NavigationMenuPrimitive.Trigger>
);
}
export function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps) {
return (
<NavigationMenuPrimitive.Content
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="content"
className={cn("h-full w-full p-[var(--popover-padding)]", className)}
{...props}
>
{children}
</NavigationMenuPrimitive.Content>
);
}
export function NavigationMenuLink({ variant = "default", className, active, children, ...props }: RefinedLinkProps) {
return (
<NavigationMenuPrimitive.Link
data-control-ui="navigation-menu"
data-popup-kind="navigation-menu"
data-slot="link"
data-control-family="popup"
data-popup-part="navigation-link"
data-variant={variant}
active={active}
className={cn(
"block select-none px-3 py-2",
variant === "compact" && "inline-flex h-[var(--control-h-sm)] items-center px-[calc(var(--padding-x)*0.75)] py-0",
className,
)}
{...props}
>
{children}
</NavigationMenuPrimitive.Link>
);
}
export function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {
return (
<NavigationMenuPrimitive.Portal>
{/* Portal escapes token-scoped ancestor — positioner re-asserts ACTIVE skin's scope.
before:* strip bridges sideOffset gap so hover survives trigger→popup. */}
<NavigationMenuPrimitive.Positioner
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="positioner"
data-skin={skinId()}
data-effects={skinEffects()}
sideOffset={8}
collisionPadding={{ top: 5, bottom: 5, left: 16, right: 16 }}
collisionAvoidance={{ side: "none" }}
className="z-[80] h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] before:absolute before:inset-x-0 before:top-[-8px] before:h-2 before:content-['']"
>
<NavigationMenuPrimitive.Popup
data-control-ui="navigation-menu"
data-control-family="popup"
data-popup-kind="navigation-menu"
data-slot="popup"
className="relative h-[var(--popup-height)] w-[var(--popup-width)]"
>
<NavigationMenuPrimitive.Viewport
data-control-ui="navigation-menu"
data-popup-kind="navigation-menu"
data-slot="viewport"
data-surface="floating"
data-control-family="popup"
data-popup-part="surface"
className={cn("relative h-full w-full overflow-hidden", className)}
{...props}
/>
</NavigationMenuPrimitive.Popup>
</NavigationMenuPrimitive.Positioner>
</NavigationMenuPrimitive.Portal>
);
}

On this page

  • Preview
  • Composition
  • Installation
  • Dependencies
  • Source
No results found.
Guides
Create app
Scaffold a Next.js app with every Control UI component installed as source you own, or hand the whole install to the coding agent already open in your project.
Guide
Overview
An owned-source registry of primitives, agent surfaces, complete blocks, and swappable skins.
Guide
Get started
Choose a skin, install a component or complete block, wire its CSS, and compose your application runtime.
Guide
Create a skin
Re-value the token contract over an installed pack, or own a full pack of three files, then reach the component knobs beneath.
Guide
shadcn compatibility
shadcn registry, token, and ownership conventions without writing to components/ui.
Guide
Architecture
Runtime ownership, skin layering, customization paths, and registry derivation.
Guide
Agent surface
Inspect and install registry items through HTTP, shadcn manifests, static metadata, and machine-readable docs.
Guide
Lock-in
What you own at each layer, what stays proprietary, and what leaving costs — measured, not promised.
Guide
Theme accessibility
Audit canonical theme colors plus rendered popup, badge, and active-tab states, then run the same checks from the CLI.
Guide
Theme AI builder
Create a Control UI theme with Claude Code, Codex, or Mastra Code, then import and test it live.
Guide
Control UI vs shadcn/ui
Both ship open-source React source through the shadcn CLI. The difference starts after install: a typed knob contract, skins that re-value it wholesale, and 16 skin modes audited against WCAG AA on every commit.
Guide
Best React component libraries for AI interfaces
Six production options compared by ownership model, theming system, and agent-specific surfaces — from shadcn/ui to MUI to Control UI.
Guide
Skins
Skinning Control UI
Author complete token-driven Control UI skins with slots, adornments, motion controls, and one shared component source.
Skin
Refined
Compact, calm starting skin with a complete Control UI token contract.
Skin
Windows XP
Windows XP-inspired Luna tokens, bevels, and titlebar details.
Skin
Liquid metal
Polished metal skin with a WebGL shader control surface.
Skin
Rig
Brutalist skin with coral accents, squared corners, and dense typography.
Skin
Flat
Neutral reset skin with square corners, no shadows, and the stock motion tempo.
Skin
Modern Apple
Apple-inspired Liquid Glass skin: WebGL-refraction on floating surfaces, precise directional rims, transparent inputs, and continuous corners.
Skin
Cuicui
Cuicui-inspired shell skin with fixed grain, a docked w-80 sidebar, a neutral main container, and the send-aurora anchored extension on ChatComposer (skin.config fills the chat-composer:send-layer anchor).
Skin
Linear
Linear-inspired skin: indigo brand on a cool neutral ramp, a flat 13px chrome band, 4px radius, hairline borders instead of elevation, and pill-shaped filled actions.
Skin
Skills
CSS-first interactivity
Model UI reactions with relational selectors, container/style queries, and native platform elements before adding React state, effects, or event handlers.
Skill
CSS-first motion & sizing
Drive sizing, enter/exit motion, and scroll effects from CSS and native attributes — token-driven and progressively enhanced — instead of measuring and animating values in JavaScript.
Skill
Derive, do not duplicate
Avoid second sources of truth in component props, hook parameters, and local state.
Skill
Remount state boundaries
Reset state by changing component identity or loading boundaries, not by syncing with effects.
Skill
Explicit names instead of comments
Encode intent in identifiers and extracted units so the code needs no explanatory comments, and keep the rare justified one telegraphic.
Skill
One responsibility per file
Split domain components and hooks before fetching, filtering, selection, and form state become entangled.
Skill
Keep input and output APIs narrow
Split oversized prop, argument, and return-value APIs into cohesive responsibilities.
Skill
Keep context necessary, narrow, and stable
Use context only across real composition boundaries, with the smallest stable semantic value consumers need.
Skill
Do not query the DOM in React
Keep element identity and collections in React instead of searching rendered markup.
Skill
Real stack tests
Prefer tests that drive production hooks, clients, routing, and cache behavior with only the network mocked.
Skill
Test rendered output, not class names
Prove visual behavior through computed styles, geometry, or browser output instead of Tailwind class strings.
Skill
Cohesive folders
Keep every folder a short, readable table of contents by grouping loose files into named responsibilities.
Skill
Single source of truth
Prevent shared facts from drifting by assigning each one a canonical owner.
Skill
Use existing components first
Start from the local design system or registry primitive before creating a new styled element.
Skill
Token discipline
Use established design tokens and local CSS variables before reaching for one-off values.
Skill
ClassName boundaries
Use component APIs for intended variation instead of overriding design-system internals with className.
Skill
Tailwind v4 CSS configuration
Configure Tailwind through CSS directives and tokens instead of adding new JavaScript config.
Skill
Tailwind v4 migration syntax
Use v4 names and modifiers when replacing or reviewing v3-era Tailwind classes.
Skill
First-class utilities before custom CSS
Prefer Tailwind v4's first-class utility families before arbitrary properties or handwritten CSS.
Skill
Variant-first styling
Check Tailwind variants before adding handwritten selectors, style props, or React state for styling.
Skill
Tailwind v4 capabilities
Reach for new v4 utilities before layout hacks, user-agent checks, or JavaScript measurement.
Skill
Tailwind v4 behavior & motion
Account for v4 behavior changes around transforms, hover, default colors, variant order, spacing, and motion.
Skill
State continuity
Show loading, empty, partial, success, and failure states in the same product language.
Skill
Provenance without noise
Surface source, runtime, and ownership cues only where they help the user trust or act.
Skill
Dense but scannable
Favor compact surfaces that support repeated work without flattening hierarchy.
Skill
Say it once
Cut redundant AI-slop copy so labels, controls, and state carry the obvious meaning.
Skill
Skin authoring
Author a skin as three files with strict roles — theme.css owns shared tokens, skin.css re-values registered component knobs, and skin.config declares behavior and adornments.
Skill
Extension authoring
Author an extension as an optional installable layered on the library — root-mounted for cross-cutting anatomy-attached behavior, anchored for component-scoped fx activated from skin.config.
Skill
Registry-first DX
Keep the registry manifest and installed source as the contract users can inspect.
Skill
Skin completeness
Treat a skin as a complete source recipe, not a partial class override layer.
Skill
Control UI composition
Keep blocks readable by composing public agent components, hooks, and slots explicitly.
Skill
Runtime-agnostic UI
Keep core visual surfaces independent from model runners, stores, and transport lifecycles.
Skill
Compound components DX
Expose named anatomy parts when users need to customize layout or actions.
Skill
Context vs props
Reach for a compound-component context only when props cannot reach the part, and store intent in it, not styling.
Skill
AI
AI components
Explore composable surfaces for messages, input, activity, media, and agent workflows.
Agent
ChatMessage
Composable chat message with typed role, density, and lifecycle state.
Agent
ChatComposer
Prompt composer with controlled text, submit state, and trigger-menu support.
Agent
ChatComposerAttachment
Composer attachment rail with file previews, upload progress, and removal.
Agent
UserAsk
Keyboard-first agent question panel that temporarily replaces the chat composer inside its container.
Agent
TaskList
Floating agent task progress pill above the composer that expands into the full task list.
Agent
AudioRecorder
Voice recorder with realtime waveform, duration, cancel, and submit controls.
Agent
AudioVisualizer
Levels-driven realtime audio visualizer offered in two usage versions - bars and line - sharing one export and one props contract.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Agent
DynamicNotification
Dynamic Island-style AI notification pill with a thinking state that morphs into a reply bubble — token-driven surface, WebGL-enhanced backdrop blur, or real refractive liquid glass.
ExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.Agent
EnvironmentVariables
Composable environment variable editor with .env upload, bulk paste, reveal controls, and submit helpers.
ExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.Agent
Activity
Shared static and collapsible activity anatomy with bounded, scrollable detail content.
Agent
TranscriptDivider
Toned run-boundary separator for transcripts: steering, interruptions, and condensed context.
Agent
Context
Compact context-window usage with an automatically derived token graph and anchored detail inspector.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Agent
InlineCitation
Inline multi-source citation with a keyboard-accessible preview and source navigation.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Agent
SourceBadge
Linked source badge with an automatic same-origin favicon, derived hostname, and resilient fallback.
Agent
ActionBar
Reusable hover actions for message and response controls.
Agent
InlineAttachment
Inline file and media previews for chat turns.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Agent
MarkdownBlock
Assistant markdown output rendered to prose, with a header and copy-source action.
Agent
CodeBlockEditor
Editable code surface with Shiki highlighting and token-based light/dark themes.
Agent
ChatLayout
Layout primitives for full chat threads, turns, and thoughts.
Agent
ThreadRail
Conversation minimap for scanning and jumping between chat turns.
Agent
Primitives
Primitives
Browse every Control UI primitive through the same live examples used in its documentation.
Primitive
Button
Accessible action button with size, variant, and semantic tone support.
Primitive
Collapsible
Accessible disclosure primitive with measured open and close motion.
Primitive
Tabs
Segmented and browser-style navigation with a stable active indicator.
Primitive
Sidebar
Responsive app sidebar with collapse, mobile sheet, and keyboard toggle support.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Scroll area
Scroll container with overlay scrollbars and edge fades.
Primitive
Table of contents
Sticky in-page navigation with scroll-spy range highlighting.
Primitive
Timeline
Static chronological events with independent status, connectors, descriptions, and metadata.
Primitive
Stepper
Static and interactive workflow steps with horizontal and vertical layouts.
Primitive
Skeleton
Loading placeholder with a token-driven shimmer.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Slider
Single-value range control with branded and plain treatments.
Primitive
Select
Single-choice picker with a token-matched trigger and floating list.
Primitive
DropdownMenu
Dropdown menu for actions, resources, labels, separators, and submenus.
Primitive
Context Menu
Pointer-positioned right-click and long-press menu with nested actions and selection controls.
Primitive
Toggle
Pressed-state button and toggle group built on the Button surface.
Primitive
Switch
On/off control with token-driven track, thumb, and press motion.
Primitive
Dialog
Modal dialog for focused tasks, confirmations, and custom panels.
Primitive
Popover
Anchored floating panel for inline settings and contextual content.
Primitive
Tooltip
Hover or focus hint popup with Base UI positioning and Control UI tokens.
Primitive
Rich tooltip
Persistent anchored tip for onboarding tours, walkthroughs, and new-feature announcements — dismissible, with optional media and step counter.
Primitive
Drawer
Swipeable edge panel for mobile sheets and off-canvas surfaces.
Primitive
Responsive dialog
Modal dialog on desktop that becomes a swipeable bottom drawer on mobile.
Primitive
Toast
Transient notifications with a callable toast API and single Toaster mount.
Primitive
Input
Text field primitive sized and styled to match other controls.
Primitive
Input group
Joined input wrapper for addons, icons, and focus-within rings.
Primitive
Dropzone
Composable file intake with validation, managed selection, and drag-activated overlays.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Phone input
International phone field with country search, E.164 values, and Zod validation helpers.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Command
Command palette with token-matched dialog, input, and result rows.
Primitive
Kbd
Keyboard shortcut chip and chord group.
Primitive
Checkbox
Single checkbox control with checked and indeterminate states.
Primitive
Radio group
Single-choice radio set for plans, filters, and option lists.
Primitive
Accordion
Stacked disclosure rows with measured panel animation.
Primitive
Avatar
Profile image with initials fallback and composable overlapping groups.
Primitive
Progress
Determinate task progress with optional label and value rows.
Primitive
Hover card
Hover or focus preview panel for profiles, links, and contextual details.
Primitive
Alert dialog
Modal confirmation dialog for destructive or blocking decisions.
Primitive
Menubar
Desktop command bar with nested menus, shortcuts, and separators.
Primitive
Navigation menu
Site navigation menu with a shared animated viewport.
Primitive
Field
Form field wrapper for labels, descriptions, errors, and validity state.
Primitive
Form
Form wrapper that coordinates field validation and returned errors.
Primitive
Native select
Native select control styled to match the Control UI control family.
Primitive
Textarea
Multiline text field with CSS-first auto-growth.
Primitive
Input OTP
One-time-code field with grouped, focus-aware slots.
Primitive
Combobox
Searchable single-select with input and floating option list.
Primitive
Alert
Inline status panel for callouts, errors, and notices.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Badge
Compact status, label, or count chip.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Card
Content surface for panels, tiles, and settings groups.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Table
Responsive data table for lists, comparisons, and structured records.
Primitive
Aspect ratio
CSS aspect-ratio wrapper for media and previews.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Button group
Joined button group for toolbars, split actions, and segmented controls.
Primitive
Empty
Empty-state layout for blank lists, zero results, and new workspaces.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Item
List row with media, content, and trailing actions.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Pagination
Page navigation for long lists and result sets.
Primitive
Spinner
Accessible loading indicator for pending buttons, panels, and inline waits.
Primitive
Meter
Static range meter for quota, storage, score, or usage values.
Primitive
Tree
Accessible tree view with roving keyboard navigation, single/multi selection, and animated disclosure.
Primitive
Checkbox Group
Multi-select checkbox set with shared state and select-all support.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Autocomplete
Free-text input with search-as-you-type suggestions.
Primitive
Number Field
Numeric input with stepper buttons and optional drag-to-change behavior.
Primitive
Trigger Menu
Caret-anchored command or mention menu for text editors.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Toolbar
Roving-focus toolbar for editor controls and compact actions.
Primitive
Dockable Panel
Non-modal workspace panel that moves between two explicit edge slots with a mobile Drawer fallback.
ExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.Primitive
Infinite Canvas
Pan-and-zoom spatial workspace for arranging content without fixed bounds.
ExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.Primitive
Morphing Panel
Accessible disclosure surface that morphs between explicit collapsed and expanded dimensions.
ExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.Primitive
Color Picker
Color input with picker UI, formats, presets, and contrast helpers.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Gradient Editor
CSS gradient editor with draggable stops and live preview.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Resizable
Accessible resizable panel groups and split layouts with keyboard support.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Calendar
Date selection grid built on react-day-picker and themed through tokens.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Primitive
Typography
The token-driven type scale — one --text-* rung per size, named by role. Publish the utilities, not a component.
Primitive
Code
Shared code surface: Shiki-highlighted lines, gutter, clean copy, and virtualization for large files.
Primitive
Code Diff
Unified or split diff from a git patch or a before/after pair, with word-level intra-line highlighting.
Primitive
Markdown
Rendered agent markdown (GFM) whose code fences compose Code, and diff fences compose CodeDiff.
Primitive
Support files
useChatMessage
Typed role, density, and lifecycle state for ChatMessage.
Hook
useChatComposer
Controlled composer text and submit state.
Hook
useUserAsk
Question/option registration, selection, freeform text, and keyboard flow for UserAsk.
Hook
useAudioRecorder
Browser microphone recording state, waveform levels, and Blob completion.
Hook
useEnvironmentVariables
Editable environment variable rows with .env parsing, upload, duplicate detection, and submit helpers.
Hook
useCopyToClipboard
Copy-to-clipboard behavior with success state and fallback support.
Hook
cn
Tailwind class-name merge helper.
Util
skin
Skin slot and adornment resolvers for the Control UI library.
Util
serialize
Bridge a rich editor doc to plain text (and structured mentions) and back — independent of any one component.
Util
Use cases
Use cases
Start from complete workspace templates or focused interaction patterns, then own and adapt the installed source.
Use case
Chat
Controlled chat shell that composes rendered turns and a provider-owned composer.
Use case
Theme toggle
Controlled theme controls with a three-value switch, binary switch, cycle button, and dropdown.
Use case
Coding agent
Desktop coding workspace with project tasks, a focused conversation, and a persistent controlled composer.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Use case
Settings
Searchable multi-page settings shell with responsive navigation and accessible control groups.
Use case
File explorer
Finder-inspired file browser with locations, search, resizable columns, breadcrumbs, and an item preview.
BetaBeta — the props contract is close to final, but small breaking changes can still land.Use case
  • Changelog