Guide for Base UI (@base-ui/react), an unstyled React component library for building accessible UIs. Use when user asks to "build a component with Base UI", "create a form with Base UI", "style Base UI components", "animate Base UI popover", "use Base UI dialog", "add Base UI select", "implement Base UI tabs", or asks about Base UI accessibility, composition, customization, styling, animation, TypeScript types, or any of its 35+ components. Covers all components (Dialog, Menu, Popover, Select, Combobox, Tabs, Accordion, Toast, Form, Field, Slider, etc.), styling patterns, animations, composition via render props, event customization, form integration, and utilities. Do NOT use for Radix UI (radix-ui), Material UI (MUI @mui/material), or Shadcn/ui - those are separate libraries with different APIs.
Guides developers in building accessible React components using the unstyled Base UI library.
npx claudepluginhub vcode-sh/vibe-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/accessibility.mdreferences/animation.mdreferences/components-dialogs.mdreferences/components-form-controls.mdreferences/components-form-fields.mdreferences/components-indicators.mdreferences/components-menus.mdreferences/components-panels.mdreferences/composition.mdreferences/forms-typescript.mdreferences/styling.mdreferences/utilities.mdBase UI (@base-ui/react) is an unstyled React component library for building accessible user interfaces. From the creators of Radix, Material UI, and Floating UI. Components are headless, composable, and WAI-ARIA compliant. Supports React 17+ and all modern browsers (Baseline Widely Available). Tree-shakable single package.
Do NOT use this guide for Radix UI (radix-ui), Material UI (MUI @mui/material), or Shadcn/ui — those are separate libraries with different APIs.
npm i @base-ui/react
.root { isolation: isolate; }
<body><div className="root">{children}</div></body>
body { position: relative; }
All components use namespaced compound pattern from a single package:
import { Popover } from '@base-ui/react/popover';
<Popover.Root>
<Popover.Trigger>Open</Popover.Trigger>
<Popover.Portal>
<Popover.Positioner sideOffset={8}>
<Popover.Popup>
<Popover.Arrow />
<Popover.Title>Title</Popover.Title>
<Popover.Description>Content</Popover.Description>
</Popover.Popup>
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
CSS Classes - static or state-dependent:
<Switch.Thumb className="SwitchThumb" />
<Switch.Thumb className={(state) => state.checked ? 'checked' : 'unchecked'} />
Data Attributes - all components expose state via data-* attributes:
.SwitchThumb[data-checked] { background: blue; }
.Popup[data-starting-style] { opacity: 0; transform: scale(0.9); }
CSS Custom Properties - dynamic values for layout/animation:
.Indicator { width: var(--slider-indicator-width); }
.Popup { transform-origin: var(--transform-origin); }
Works with Tailwind CSS, CSS Modules, CSS-in-JS, or plain CSS.
Replace default elements with custom components or different HTML tags:
// Custom component (must forward ref and spread props)
<Dialog.Trigger render={<MyButton size="md" />} />
// Different HTML element
<Menu.Item render={<a href="/profile" />}>Profile</Menu.Item>
// Render function with state access
<Checkbox.Root render={(props, state) => (
<span {...props}>{state.checked ? <CheckIcon /> : <BoxIcon />}</span>
)} />
All interactive Base UI components require 'use client' in React Server Component environments. Only static display components (Separator, Avatar without interaction) can be used in server components.
Combobox and Autocomplete use a unique render-children pattern on List — pass a function that receives each filtered item:
<Combobox.List>
{(item) => (
<Combobox.Item key={item.value} value={item}>
{item.label}
</Combobox.Item>
)}
</Combobox.List>
This differs from Select, where you explicitly .map() over items inside Select.List.
All interactive components support both modes:
// Uncontrolled (internal state)
<Dialog.Root defaultOpen={false}>
// Controlled (external state)
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
Change handlers receive (value, eventDetails):
<Dialog.Root onOpenChange={(open, details) => {
if (details.reason === 'escape-key') {
details.cancel(); // Prevent closing
}
}}>
Key eventDetails methods: cancel(), allowPropagation(). Access reason for why the change occurred.
CSS Transitions (recommended - can be cancelled midway):
.Popup {
transition: transform 150ms, opacity 150ms;
transform-origin: var(--transform-origin);
}
.Popup[data-starting-style],
.Popup[data-ending-style] {
opacity: 0;
transform: scale(0.9);
}
CSS Animations: Use [data-open] / [data-closed] with @keyframes.
JavaScript (Motion): Use keepMounted + render prop + <AnimatePresence>.
Types organized by namespace:
Tooltip.Root.Props // Component props
Popover.Positioner.State // Internal state type
Combobox.Root.ChangeEventDetails // Event details type
| Component | Parts | Description |
|---|---|---|
| Dialog | Root, Trigger, Portal, Backdrop, Popup, Title, Description, Close | Modal dialog with focus trap |
| AlertDialog | Root, Trigger, Portal, Backdrop, Popup, Title, Description, Close | Confirmation dialog (no pointer dismiss) |
| Popover | Root, Trigger, Portal, Positioner, Popup, Arrow, Title, Description | Non-modal floating content |
| Tooltip | Provider, Root, Trigger, Portal, Positioner, Popup, Arrow | Hover/focus info popup |
| PreviewCard | Root, Trigger, Portal, Positioner, Popup, Arrow | Link hover preview |
| Toast | Provider, Portal, Viewport, Root, Title, Description, Action, Close | Notification toasts (stacked or anchored) |
| Menu | Root, Trigger, Portal, Positioner, Popup, Arrow, Item, Group, Separator + Radio/Checkbox items | Dropdown menu with submenus |
| ContextMenu | Root, Trigger, Portal, Positioner, Popup, Item, Group + submenus | Right-click context menu |
| NavigationMenu | Root, List, Item, Trigger, Content, Portal, Positioner, Popup, Link | Site navigation with panels |
| Menubar | Wrapper + Menu.Root instances | Horizontal application menu bar |
| Component | Parts | Description |
|---|---|---|
| Form | Single wrapper | Form with validation and submission |
| Field | Root, Label, Control, Description, Error, Validity | Field wrapper with validation |
| Fieldset | Root, Legend | Groups related fields |
| Input | Single element | Text input with state data attributes |
| NumberField | Root, ScrubArea, Group, Decrement, Input, Increment | Numeric input with stepper |
| Checkbox | Root, Indicator | Checkbox with indeterminate support |
| CheckboxGroup | Root | Manages multiple checkbox state |
| Radio | Root, Indicator + RadioGroup | Radio button group |
| Select | Root, Trigger, Value, Portal, Positioner, Popup, List, Item, ItemIndicator | Dropdown select |
| Combobox | Root, Input, Trigger, Portal, Positioner, Popup, List, Item + chips | Searchable select with filtering |
| Autocomplete | Root, Input, Trigger, Portal, Positioner, Popup, List, Item | Text input with suggestions |
| Switch | Root, Thumb | Toggle switch |
| Slider | Root, Value, Control, Track, Indicator, Thumb | Range slider (single or multi-thumb) |
| Toggle | Single element | Pressable toggle button |
| ToggleGroup | Wrapper + Toggle children | Exclusive or multi-select toggles |
| Button | Single element | Accessible button |
| Component | Parts | Description |
|---|---|---|
| Accordion | Root, Item, Header, Trigger, Panel | Expandable content sections |
| Collapsible | Root, Trigger, Panel | Single expand/collapse |
| Tabs | Root, List, Tab, Indicator, Panel | Tabbed interface |
| ScrollArea | Root, Viewport, Content, Scrollbar, Thumb, Corner | Custom scrollbars |
| Toolbar | Root, Button, Link, Separator, Group, Input | Action toolbar |
| Separator | Single element | Visual divider |
| Progress | Root, Track, Indicator, Value, Label | Progress bar |
| Meter | Root, Track, Indicator, Value, Label | Gauge/meter display |
| Avatar | Root, Image, Fallback | Profile image with fallback |
| Utility | Purpose |
|---|---|
| CSPProvider | Apply nonce to inline styles/scripts for CSP |
| DirectionProvider | Enable RTL behavior for components |
| mergeProps | Merge React props with special handler/class/style merging |
| useRender | Hook to enable render prop pattern in custom components |
isolation: isolate on app root for portal z-index stackingrender must forward ref and spread propsname prop on Field.Root for form submissionnativeLabel prop - set false for button-based controls (Select, Combobox)preventBaseUIHandler() on React events to bypass Base UI's internal event handlingisolation: isolate on app root - popups appear behind contentopacity - Base UI uses element.getAnimations() to detect completion; animate opacity even to 0.9999 if not otherwise needednativeLabel={false} on Field.Label for button-based controls (Select, Combobox)Portal wrapper or stacking context not set upname prop on Field.RooteventDetails.allowPropagation() if you want parent popups to also closekeepMounted on Portal + controlled open state + <AnimatePresence> for unmounted componentsPopup/floating components expose:
--anchor-width, --anchor-height - Trigger element dimensions--available-width, --available-height - Available space--transform-origin - Animation origin pointSizing components expose:
--accordion-panel-height, --collapsible-panel-height - Panel dimensions--slider-*, --scroll-area-* - Component-specific sizing--active-tab-left, --active-tab-width - Tab indicator positioningreferences/components-dialogs.md - Dialog, AlertDialog, Popover, Tooltip, PreviewCardreferences/components-menus.md - Toast, Menu, ContextMenu, NavigationMenu, Menubar, shared patternsreferences/components-form-fields.md - Form, Field, Fieldset, Input, NumberField, Checkbox, CheckboxGroup, Radioreferences/components-form-controls.md - Select, Combobox, Autocomplete, Switch, Slider, Toggle, ToggleGroup, Buttonreferences/components-panels.md - Accordion, Collapsible, Tabs, ScrollAreareferences/components-indicators.md - Toolbar, Separator, Progress, Meter, Avatarreferences/styling.md - Complete styling guide (Tailwind, CSS Modules, CSS-in-JS)references/animation.md - Animation patterns (CSS transitions, CSS animations, Motion/JS)references/composition.md - Composition, customization, and event handlingreferences/forms-typescript.md - Form integration and TypeScript type patternsreferences/utilities.md - CSPProvider, DirectionProvider, mergeProps, useRenderreferences/accessibility.md - Accessibility features, keyboard navigation, focus management, ARIAExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.