base-ui-handbook-foundations
Base UI Handbook: Foundations
Use this skill when a question is cross-component and not about one concrete component’s API.
Scope
- Styling model (
className,style,render, state callbacks) - CSS hooks (
data-*state attrs, CSS vars, data attributes from popup placement) - Animation and transition attributes
- Composition patterns with nested
rendercallbacks mergeProps,mergePropsN, anduseRenderfor wrapper authors- Customization and behavior tuning (
open,onOpenChange, reason-based handlers, cancellation helpers)
Routing cues
- "style hooks", "Tailwind", "CSS module", "composition", "render prop", "mergeProps", "useRender", "animation", "transition", "custom behavior", "event reason" → this skill
Canonical references
- https://base-ui.com/react/handbook/styling
- https://base-ui.com/react/handbook/animation
- https://base-ui.com/react/handbook/composition
- https://base-ui.com/react/handbook/customization
- https://base-ui.com/react/utils/merge-props
- https://base-ui.com/react/utils/use-render
- https://base-ui.com/react/overview/accessibility
Maintenance
- Snapshot date: 2026-03-10
- Refresh cadence: quarterly
- Upstream changelog anchor: https://github.com/mui/base-ui/blob/master/CHANGELOG.md
References
More from dobroslavradosavljevic/skills
base-ui-typescript-surface
Use for Base UI namespace contracts, change event types, generic render types, and wrapper typing patterns.
4base-ui-basic-primitives
Use for simple primitives with low integration complexity (Avatar, Button, Meter, Progress, Scroll Area, Separator).
4base-ui-root-providers
Use for CSP Provider, Direction Provider, and useDirection when wiring Base UI at the app root or across portals.
4base-ui-menus-navigation-and-toast
Use for Menu, Context Menu, Menubar, Navigation Menu, Toolbar, Toast, and shared command-surface patterns such as detached triggers and menu payloads.
4base-ui-forms-and-validation
Use for Base UI Field/Form primitives, validation flows, form controls, and advanced Number Field, Slider, and RadioGroup behavior.
4base-ui-disclosure-and-tabs
Use for stateful visibility components (Accordion, Collapsible) and tab navigation semantics.
4