Skip to contents
1.3.0GitHub

Handbook

Styling

A guide to styling Base UI components with your preferred styling engine.

Outline
  • Keywords: Base UI Styling, Tailwind Base UI, CSS Modules Base UI, CSS-in-JS Base UI, Style Hooks Data Attributes, Unstyled React Components, Handbook Styling, Headless UI Styling, Theming, Custom Styles, Utility First CSS, Headless Components Styling
  • Sections:
    • Style hooks
      • CSS classes
      • Data attributes
      • CSS variables
      • Style prop
    • Tailwind CSS
    • CSS Modules
    • CSS-in-JS

Read more

Animation

A guide to animating Base UI components.

Outline
  • Keywords: Base UI Animation, React Component Animations, CSS Transition Guide, Motion Framer Integration, Animation Data Attributes, Handbook Animation, Spring Animations, Enter Exit Animations, Transition Hooks, Animated Components, Keyframe Animations
  • Sections:
    • CSS transitions
    • CSS animations
    • JavaScript animations
      • Animating components unmounted from DOM when closed with Motion
      • Animating components kept in DOM when closed with Motion
      • Animating Select component with Motion
      • Manual unmounting

Read more

Composition

A guide to composing Base UI components with your own React components.

Outline
  • Keywords: Base UI Composition, React Render Prop, Compose Headless Components, Custom Trigger Render, Nested Render Props, Composition Handbook, Component Composition, Render Props Pattern, Compound Components, Polymorphic Components, As Prop, Custom Elements, Wrapper Components
  • Sections:
    • Composing custom React components
    • Composing multiple components
    • Changing the default rendered element
    • Render function

Read more

Customization

A guide to customizing the behavior of Base UI components.

Outline
  • Keywords: Base UI Customization, React eventDetails, Control Base UI State, Cancel Base UI Events, Allow Propagation Tooltip, Customization Handbook, Event Handlers, Controlled Components, Uncontrolled Components, Component Behavior, Event Callbacks, State Management, Component Props, Override Behavior
  • Sections:
    • Base UI events
      • Canceling a Base UI event
      • Allowing propagation of the DOM event
    • Preventing Base UI from handling a React event
    • Controlling components with state

Read more

Forms

A guide to building forms with Base UI components.

Outline
  • Keywords: Base UI Forms, React Accessible Forms, Field Validation Handbook, React Hook Form Integration, TanStack Form Guide, Constraint Validation API, Handbook Forms, Form State, Form Library, Form Handling, Input Validation, Error Messages, Form Submission, Accessible Forms, ARIA Forms
  • Sections:
    • Naming form controls
      • Input controls
      • Trigger-based controls
      • Fallback
      • Describing the control
      • Labeling control groups
    • Building form fields
    • Submitting data
    • Constraint validation
    • Custom validation
    • Server-side validation
    • Displaying errors
    • React Hook Form
      • Initialize the form
      • Integrate components
      • Field validation
      • Submitting data
    • TanStack Form
      • Initialize the form
      • Integrate components
      • Form validation
      • Field validation
      • Submitting data

Read more

TypeScript

A guide to using TypeScript with Base UI.

Outline
  • Keywords: Base UI TypeScript, Component Props Namespace, Combobox ChangeEventDetails, Popover Positioner State, Toast Actions Ref Types, Use Render Component Props, Handbook TypeScript, Type Definitions, Type Safety, Generics, Component Types, Props Types, Event Types, Ref Types, Type Inference, Strongly Typed Components
  • Sections:
    • Namespaces
      • Props
      • State
      • Events
      • Other accessible types

Read more