React reference

Behavior, one hook at a time.

Choose the behavior you need. Each hook opens a focused guide with its own example, options, return values, and component preview.

Start with React installation and setup. In an application with React Server Components, call these hooks from a client component. React Native has its own native controllers.

Overlays and menus

Open a surface, manage focus, and return safely to the trigger.

useDialog

Manages modal and alert dialog lifecycle — open, close, focus trapping, backdrop click dismiss, and Escape key handling. Spreads props onto a <dialog> element.

Dialog · Options, controller, and example

usePopover

Manages popover disclosure — toggle, outside click close, Escape key dismiss, and arrow key navigation through focusable panel items.

Popover · Options, controller, and example

useDropdownMenu

Manages dropdown menu disclosure — identical API to usePopover but sets aria-haspopup to "menu" for correct ARIA semantics on menu triggers.

DropdownMenu · Options, controller, and example

useContextMenu

Binds a trigger to a context menu that opens on right-click or Shift+F10 and supports Escape and roving item focus.

ContextMenu · Options, controller, and example

useTooltip

Manages tooltip show/hide with configurable delay, hover and focus triggers, and Escape key dismissal.

Tooltip · Options, controller, and example

Selection and preferences

Connect selected values, language, and appearance to your application.

useLanguageToggle

Coordinates controlled or uncontrolled locale cycling, persistence, and document language synchronization for React applications.

LanguageToggle · Options, controller, and example

useTabs

Manages a tabbed interface with controlled/uncontrolled value, arrow key navigation, roving tabindex, and automatic ARIA attributes for tab triggers and panels.

Tabs · Options, controller, and example

useSelect

Manages a fully custom select with native <select> fallback, ARIA listbox, typeahead character search, keyboard navigation, and external form integration.

Select · Options, controller, and example

useThemeToggle

Synchronizes a light or dark theme with the document, local storage, and the shared theme-change event, with an optional pointer-origin transition that respects reduced motion.

ThemeToggle · Options, controller, and example

Forms and dates

Handle validation, calendar selection, date ranges, and one-time codes.

useFormValidation

Enhances native HTML form validation with custom error messages via data-error-* attributes, live field description syncing, and programmatic validity control.

Form · Options, controller, and example

useCalendar

Builds an Astro-compatible calendar grid with hidden input value, min/max clamping, month navigation, selection, and roving keyboard focus.

Calendar · Options, controller, and example

useDateRangePicker

Keeps paired native date inputs constrained so the end date cannot be before the start date.

DateRangePicker · Options, controller, and example

useInputOTP

Builds an Astro-compatible OTP field with a native input, visual segments, sanitized values, and caret navigation.

InputOTP · Options, controller, and example

Editors and workspaces

Compose editable content, schedules, boards, panes, and themes.

useRichTextEditor

Provides rich text editing commands, values, shortcuts, active toolbar state, and HTML/text change details.

RichTextEditor · Options, controller, and example

useSchedule

Provides props for schedule/agenda slot and event elements, and emits change details when a slot or event is interacted with.

Schedule · Options, controller, and example

useKanban

Provides controlled Kanban move requests and accessible props for boards, columns, items, and dedicated drag handles across keyboard, mouse, and touch input.

KanbanBoard · Options, controller, and example

useResizable

Provides pane sizing props and separator handle props for horizontal or vertical resizable groups.

Resizable · Options, controller, and example

useThemeBuilder

Interactive theme builder with controllable hue, accent, mode (generated/manual), scheme (light/dark), color pickers, and export in CSS, Figma variables, or design token formats.

ThemeBuilder · Options, controller, and example

Feedback

Create, update, and dismiss notifications from React state.

useToast

Consumes the ToastProvider context to create, update, and dismiss toast notifications. Requires a ToastProvider ancestor in the component tree.

Toast · Options, controller, and example