# Radix UI Primitives

## Docs

- [Accessibility](https://mintlify.wiki/radix-ui/primitives/accessibility.md): Learn how Radix UI Primitives implement WAI-ARIA patterns, keyboard navigation, and screen reader support for accessible web applications.
- [composeRefs](https://mintlify.wiki/radix-ui/primitives/api/compose-refs.md): Utilities for composing multiple React refs into a single ref callback.
- [Direction](https://mintlify.wiki/radix-ui/primitives/api/direction.md): Provider and hook for managing text direction (LTR/RTL) in your application.
- [Dismissable Layer](https://mintlify.wiki/radix-ui/primitives/api/dismissable-layer.md): A component that detects and handles interactions outside of itself, commonly used for dismissing overlays and menus.
- [Focus Guards](https://mintlify.wiki/radix-ui/primitives/api/focus-guards.md): Injects invisible elements at the edges of the DOM to ensure focus events can be reliably captured.
- [Focus Scope](https://mintlify.wiki/radix-ui/primitives/api/focus-scope.md): Constrains focus navigation within a specific area of your application, essential for modals and dialogs.
- [Presence](https://mintlify.wiki/radix-ui/primitives/api/presence.md): Animates components when they mount and unmount, waiting for CSS animations to complete before unmounting.
- [Primitive](https://mintlify.wiki/radix-ui/primitives/api/primitive.md): Low-level building blocks that render basic HTML elements with optional slot composition.
- [Roving Focus](https://mintlify.wiki/radix-ui/primitives/api/roving-focus.md): Manages focus navigation within a group of elements using arrow keys, with support for horizontal and vertical orientation.
- [useCallbackRef](https://mintlify.wiki/radix-ui/primitives/api/use-callback-ref.md): A hook that converts a callback to a ref to avoid triggering re-renders when passed as a prop or avoid re-executing effects when passed as a dependency.
- [useControllableState](https://mintlify.wiki/radix-ui/primitives/api/use-controllable-state.md): A hook for managing controlled and uncontrolled state patterns in React components.
- [useEffectEvent](https://mintlify.wiki/radix-ui/primitives/api/use-effect-event.md): A hook that approximates React's experimental useEffectEvent, providing a stable function reference with the latest closure.
- [useEscapeKeydown](https://mintlify.wiki/radix-ui/primitives/api/use-escape-keydown.md): A hook that listens for Escape key presses and triggers a callback handler.
- [useIsHydrated](https://mintlify.wiki/radix-ui/primitives/api/use-is-hydrated.md): A hook that determines whether the component tree has been hydrated on the client.
- [useLayoutEffect](https://mintlify.wiki/radix-ui/primitives/api/use-layout-effect.md): A safe version of React's useLayoutEffect that doesn't emit warnings on the server.
- [useSize](https://mintlify.wiki/radix-ui/primitives/api/use-size.md): A hook that observes and returns the size of an HTML element using ResizeObserver.
- [Accessible Icon](https://mintlify.wiki/radix-ui/primitives/components/accessible-icon.md): Makes icons accessible by providing a text alternative.
- [Accordion](https://mintlify.wiki/radix-ui/primitives/components/accordion.md): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert Dialog](https://mintlify.wiki/radix-ui/primitives/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Arrow](https://mintlify.wiki/radix-ui/primitives/components/arrow.md): Renders an arrow element for popovers and tooltips.
- [Aspect Ratio](https://mintlify.wiki/radix-ui/primitives/components/aspect-ratio.md): Displays content within a desired ratio.
- [Avatar](https://mintlify.wiki/radix-ui/primitives/components/avatar.md): An image element with a fallback for representing the user.
- [Checkbox](https://mintlify.wiki/radix-ui/primitives/components/checkbox.md): A control that allows the user to toggle between checked and unchecked.
- [Collapsible](https://mintlify.wiki/radix-ui/primitives/components/collapsible.md): An interactive component which expands and collapses a panel.
- [Context Menu](https://mintlify.wiki/radix-ui/primitives/components/context-menu.md): Displays a menu located at the pointer, triggered by a right-click or long-press.
- [Dialog](https://mintlify.wiki/radix-ui/primitives/components/dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Dropdown Menu](https://mintlify.wiki/radix-ui/primitives/components/dropdown-menu.md): Displays a menu to the user triggered by a button, typically used for navigation or commands.
- [Form](https://mintlify.wiki/radix-ui/primitives/components/form.md): A form component with built-in validation and accessibility features.
- [Hover Card](https://mintlify.wiki/radix-ui/primitives/components/hover-card.md): For sighted users to preview content available behind a link.
- [Label](https://mintlify.wiki/radix-ui/primitives/components/label.md): A label element that can be associated with a form control.
- [Menubar](https://mintlify.wiki/radix-ui/primitives/components/menubar.md): A visually persistent menu common in desktop applications.
- [Navigation Menu](https://mintlify.wiki/radix-ui/primitives/components/navigation-menu.md): A collection of links for site navigation.
- [One-Time Password Field](https://mintlify.wiki/radix-ui/primitives/components/one-time-password-field.md): A field for entering one-time passwords or verification codes.
- [Password Toggle Field](https://mintlify.wiki/radix-ui/primitives/components/password-toggle-field.md): A password input with a toggle to show or hide the password.
- [Popover](https://mintlify.wiki/radix-ui/primitives/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Portal](https://mintlify.wiki/radix-ui/primitives/components/portal.md): Renders content outside of the main DOM hierarchy.
- [Progress](https://mintlify.wiki/radix-ui/primitives/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Radio Group](https://mintlify.wiki/radix-ui/primitives/components/radio-group.md): A set of checkable buttons where no more than one can be checked at a time.
- [Scroll Area](https://mintlify.wiki/radix-ui/primitives/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://mintlify.wiki/radix-ui/primitives/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://mintlify.wiki/radix-ui/primitives/components/separator.md): Visually or semantically separates content.
- [Slider](https://mintlify.wiki/radix-ui/primitives/components/slider.md): An input where the user selects a value from within a given range.
- [Slot](https://mintlify.wiki/radix-ui/primitives/components/slot.md): Merges its props onto its immediate child.
- [Switch](https://mintlify.wiki/radix-ui/primitives/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Tabs](https://mintlify.wiki/radix-ui/primitives/components/tabs.md): A set of layered sections of content, displayed one at a time.
- [Toast](https://mintlify.wiki/radix-ui/primitives/components/toast.md): A succinct message that is displayed temporarily.
- [Toggle](https://mintlify.wiki/radix-ui/primitives/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://mintlify.wiki/radix-ui/primitives/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Toolbar](https://mintlify.wiki/radix-ui/primitives/components/toolbar.md): A container for grouping a set of controls.
- [Tooltip](https://mintlify.wiki/radix-ui/primitives/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Visually Hidden](https://mintlify.wiki/radix-ui/primitives/components/visually-hidden.md): Hides content from the screen in an accessible way.
- [Composition](https://mintlify.wiki/radix-ui/primitives/composition.md): Understand Radix UI's composable API design and how components map 1-to-1 with DOM elements for maximum flexibility.
- [Composability](https://mintlify.wiki/radix-ui/primitives/concepts/composability.md): Understanding how Radix UI components compose with direct DOM access and predictable behavior
- [Customization](https://mintlify.wiki/radix-ui/primitives/concepts/customization.md): Learn how to style Radix UI components with complete flexibility using any styling solution
- [Internationalization](https://mintlify.wiki/radix-ui/primitives/concepts/internationalization.md): Building globally accessible applications with RTL support, direction awareness, and locale considerations
- [Philosophy](https://mintlify.wiki/radix-ui/primitives/concepts/philosophy.md): Understanding the core principles and guiding philosophy behind Radix UI Primitives
- [State Management](https://mintlify.wiki/radix-ui/primitives/concepts/state-management.md): Understanding controlled and uncontrolled components, state callbacks, and state patterns in Radix UI
- [Animation](https://mintlify.wiki/radix-ui/primitives/guides/animation.md): Learn how to animate Radix UI Primitives using CSS transitions, keyframe animations, and animation libraries
- [Migration Guide](https://mintlify.wiki/radix-ui/primitives/guides/migration.md): Guide for migrating between major versions of Radix UI Primitives
- [Server-Side Rendering](https://mintlify.wiki/radix-ui/primitives/guides/server-side-rendering.md): Learn how to use Radix UI Primitives with server-side rendering frameworks like Next.js
- [TypeScript](https://mintlify.wiki/radix-ui/primitives/guides/typescript.md): Learn how to use Radix UI Primitives with TypeScript for type-safe component development
- [Installation](https://mintlify.wiki/radix-ui/primitives/installation.md): Install Radix UI Primitives and get started building accessible React components.
- [Introduction](https://mintlify.wiki/radix-ui/primitives/introduction.md): An overview of Radix UI Primitives, an open-source React component library for building high-quality, accessible design systems and web applications.
- [Styling](https://mintlify.wiki/radix-ui/primitives/styling.md): Learn how to style Radix UI Primitives with CSS, CSS-in-JS, Tailwind, or any styling solution.