Base UI

Overview

Use this skill as a navigation hub for Base UI. Load the specific reference files when needed.

Start Here

• Read

  references/overview.md

  for install, portal isolation, iOS 26 Safari, and LLM docs access.
• Pick components from

  references/components.md

  .
• Choose guidance by need: styling, composition, customization, animation, forms, TypeScript, or utils.

Reference Map

• references/overview.md

  : install, portals, iOS 26 Safari, LLM docs, project context.

• references/components.md

  : full component and utility index with .md doc links.

• references/styling.md

  : className/state, data attributes, CSS variables, style prop, Tailwind/CSS Modules/CSS-in-JS patterns.

• references/composition.md

  : render prop usage, ref forwarding, nesting render props.

• references/customization.md

  : Base UI events, eventDetails, cancel/allowPropagation, preventBaseUIHandler, controlled vs uncontrolled.

• references/animation.md

  : data attributes, transitions vs animations, Motion/AnimatePresence, keepMounted, getAnimations.

• references/forms.md

  : Form/Field patterns, constraint validation, server-side errors, RHF/TanStack integration.

• references/typescript.md

  : Props/State namespaces, ChangeEventDetails/Reason, actionsRef types, useRender types.

• references/utils.md

  : CSPProvider, DirectionProvider/useDirection, mergeProps/mergePropsN, useRender patterns.

• references/edge-cases.md

  : common pitfalls and fixes.

• references/examples.md

  : concise, runnable examples.

• references/links.md

  : issues and changelog entry points.

Use Pattern

1. Identify the component or utility.
2. Read the component docs in

   references/components.md

   .
3. Pull in the relevant handbook or utility reference.
4. Confirm edge cases in

   references/edge-cases.md

   .
5. Use

   references/links.md

   for issues and release notes before shipping.