# Docs

- [Introduction](/docs/introduction): Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready, and customizable.
- [Changelog](/docs/changelog): Latest updates, improvements, and announcements.
- Components
  - [Action Bar](/docs/components/radix/action-bar): A floating action bar that appears at the bottom or top of the viewport to display contextual actions for selected items.
  - [Angle Slider](/docs/components/radix/angle-slider): An interactive circular slider for selecting angles with support for single values and ranges.
  - [Avatar Group](/docs/components/radix/avatar-group): A component that arranges avatars with overlapping visual effects for displaying multiple users or items.
  - [Badge Overflow](/docs/components/radix/badge-overflow): A component that intelligently manages badge overflow by measuring available space and displaying only what fits with an overflow indicator.
  - [Banner](/docs/components/radix/banner): A notification banner that appears at the top or bottom of the viewport. Supports queuing, priority, and auto-dismiss.
  - [Checkbox Group](/docs/components/radix/checkbox-group): A group of checkboxes that allows multiple selections with support for validation and accessibility.
  - [Circular Progress](/docs/components/radix/circular-progress): A circular progress indicator that displays completion progress in a ring format with support for indeterminate states.
  - [Color Picker](/docs/components/radix/color-picker): A color picker component that allows users to select colors using various input methods.
  - [Color Swatch](/docs/components/radix/color-swatch): A color swatch component for displaying color values with support for transparency and various sizes.
  - [Combobox](/docs/components/radix/combobox): An input with a popover that helps users filter through a list of options.
  - [Compare Slider](/docs/components/radix/compare-slider): An interactive before/after comparison slider for comparing two elements side by side.
  - [Cropper](/docs/components/radix/cropper): A powerful image and video cropper with zoom, rotation, and customizable crop areas.
  - [Data Grid](/docs/components/radix/data-grid): A high-performance editable data grid component with virtualization, keyboard navigation, and comprehensive cell editing capabilities.
  - [Data Table](/docs/components/radix/data-table): A powerful and flexible data table component for displaying, filtering, sorting, and paginating tabular data.
  - [Editable](/docs/components/radix/editable): An accessible inline editable component for editing text content in place.
  - [File Upload](/docs/components/radix/file-upload): A file upload component with drag and drop, previewing, and progress tracking.
  - [FPS](/docs/components/radix/fps): A real-time frames per second (FPS) counter component for monitoring performance.
  - [Gauge](/docs/components/radix/gauge): A customizable gauge component that displays values on circular or partial arcs, perfect for dashboards, metrics, and KPIs.
  - [Kanban](/docs/components/radix/kanban): A drag and drop kanban board component for organizing items into columns.
  - [Kbd](/docs/components/radix/kbd): A keyboard key primitive for displaying keyboard shortcuts and key combinations.
  - [Key Value](/docs/components/radix/key-value): A dynamic input component for managing key-value pairs with paste support and validation.
  - [Listbox](/docs/components/radix/listbox): A component for creating keyboard-navigable selection lists and grids.
  - [Marquee](/docs/components/radix/marquee): An animated scrolling component that continuously moves content horizontally or vertically.
  - [Mask Input](/docs/components/radix/mask-input): An input component that formats user input with predefined patterns like phone numbers, dates, and credit cards.
  - [Masonry](/docs/components/radix/masonry): A responsive masonry layout component for displaying items in a grid.
  - [Media Player](/docs/components/radix/media-player): A fully featured media player component supporting video and audio playback with custom controls.
  - [Mention](/docs/components/radix/mention): A component that allows to mention items in a list by a trigger character.
  - [Phone Input](/docs/components/radix/phone-input): An accessible phone input component with automatic country detection and international phone number formatting.
  - [Presentation](/docs/components/radix/presentation): Composable primitives for viewing and editing PowerPoint presentations in the browser.
  - [QR Code](/docs/components/radix/qr-code): A flexible QR code component for generating and displaying QR codes with customization options.
  - [Rating](/docs/components/radix/rating): An accessible rating component that allows users to provide star ratings with support for half values, keyboard navigation, and form integration.
  - [Relative Time Card](/docs/components/radix/relative-time-card): A hover card that displays relative time relative to local time with timezone information.
  - [Responsive Dialog](/docs/components/radix/responsive-dialog): A dialog component that automatically switches between a centered dialog on desktop and a bottom drawer on mobile.
  - [Scroll Spy](/docs/components/radix/scroll-spy): Automatically updates navigation links based on scroll position with support for nested sections and customizable behavior.
  - [Scroller](/docs/components/radix/scroller): A scrollable container with customizable scroll shadows and navigation buttons.
  - [Segmented Input](/docs/components/radix/segmented-input): A group of connected input fields that appear as a single segmented visual unit.
  - [Selection Toolbar](/docs/components/radix/selection-toolbar): A floating toolbar that appears on text selection with formatting and utility actions.
  - [Sortable](/docs/components/radix/sortable): A drag and drop sortable component for reordering items.
  - [Speed Dial](/docs/components/radix/speed-dial): A floating action button that reveals a set of actions when triggered.
  - [Stack](/docs/components/radix/stack): A component that displays items in a stacked layout with hover expansion effects, similar to Sonner toast stacking.
  - [Stat](/docs/components/radix/stat): A flexible component for displaying key metrics and statistics with support for trends, indicators, and descriptions.
  - [Status](/docs/components/radix/status): A flexible status indicator component with animated ping effect and color variants for displaying system states, user presence, and service health.
  - [Stepper](/docs/components/radix/stepper): A component that guides users through a multi-step process with clear visual progress indicators.
  - [Swap](/docs/components/radix/swap): A component that swaps between two states with click or hover activation modes.
  - [Tags Input](/docs/components/radix/tags-input): Display a list of tags in an input field with the ability to add, edit, and remove them.
  - [Time Picker](/docs/components/radix/time-picker): An accessible time picker component with inline editing and dropdown selection. Automatically adapts to 12-hour or 24-hour format based on user locale.
  - [Timeline](/docs/components/radix/timeline): A flexible timeline component for displaying chronological events with support for different orientations, RTL layouts, and visual states.
  - [Tour](/docs/components/radix/tour): A guided tour component that highlights elements and provides step-by-step instructions to help users learn about your application.
  - [Action Bar](/docs/components/base/action-bar): A floating action bar that appears at the bottom or top of the viewport to display contextual actions for selected items.
  - [Angle Slider](/docs/components/base/angle-slider): An interactive circular slider for selecting angles with support for single values and ranges.
  - [Avatar Group](/docs/components/base/avatar-group): A component that arranges avatars with overlapping visual effects for displaying multiple users or items.
  - [Badge Overflow](/docs/components/base/badge-overflow): A component that intelligently manages badge overflow by measuring available space and displaying only what fits with an overflow indicator.
  - [Banner](/docs/components/base/banner): A notification banner that appears at the top or bottom of the viewport. Supports queuing, priority, and auto-dismiss.
  - [Circular Progress](/docs/components/base/circular-progress): A circular progress indicator that displays completion progress in a ring format with support for indeterminate states.
  - [Color Picker](/docs/components/base/color-picker): A color picker component that allows users to select colors using various input methods.
  - [Color Swatch](/docs/components/base/color-swatch): A color swatch component for displaying color values with support for transparency and various sizes.
  - [Compare Slider](/docs/components/base/compare-slider): An interactive before/after comparison slider for comparing two elements side by side.
  - [Cropper](/docs/components/base/cropper): A powerful image and video cropper with zoom, rotation, and customizable crop areas.
  - [Editable](/docs/components/base/editable): An accessible inline editable component for editing text content in place.
  - [File Upload](/docs/components/base/file-upload): A file upload component with drag and drop, previewing, and progress tracking.
  - [FPS](/docs/components/base/fps): A real-time frames per second (FPS) counter component for monitoring performance.
  - [Gauge](/docs/components/base/gauge): A customizable gauge component that displays values on circular or partial arcs, perfect for dashboards, metrics, and KPIs.
  - [Kanban](/docs/components/base/kanban): A drag and drop kanban board component for organizing items into columns.
  - [Key Value](/docs/components/base/key-value): A dynamic input component for managing key-value pairs with paste support and validation.
  - [Marquee](/docs/components/base/marquee): An animated scrolling component that continuously moves content horizontally or vertically.
  - [Mask Input](/docs/components/base/mask-input): An input component that formats user input with predefined patterns like phone numbers, dates, and credit cards.
  - [Masonry](/docs/components/base/masonry): A responsive masonry layout component for displaying items in a grid.
  - [Media Player](/docs/components/base/media-player): A fully featured media player component supporting video and audio playback with custom controls.
  - [Phone Input](/docs/components/base/phone-input): An accessible phone input component with automatic country detection and international phone number formatting.
  - [Presentation](/docs/components/base/presentation): Composable primitives for viewing and editing PowerPoint presentations in the browser.
  - [QR Code](/docs/components/base/qr-code): A flexible QR code component for generating and displaying QR codes with customization options.
  - [Rating](/docs/components/base/rating): An accessible rating component that allows users to provide star ratings with support for half values, keyboard navigation, and form integration.
  - [Relative Time Card](/docs/components/base/relative-time-card): A hover card that displays relative time relative to local time with timezone information.
  - [Responsive Dialog](/docs/components/base/responsive-dialog): A dialog component that automatically switches between a centered dialog on desktop and a bottom drawer on mobile.
  - [Scroll Spy](/docs/components/base/scroll-spy): Automatically updates navigation links based on scroll position with support for nested sections and customizable behavior.
  - [Scroller](/docs/components/base/scroller): A scrollable container with customizable scroll shadows and navigation buttons.
  - [Segmented Input](/docs/components/base/segmented-input): A group of connected input fields that appear as a single segmented visual unit.
  - [Selection Toolbar](/docs/components/base/selection-toolbar): A floating toolbar that appears on text selection with formatting and utility actions.
  - [Sortable](/docs/components/base/sortable): A drag and drop sortable component for reordering items.
  - [Speed Dial](/docs/components/base/speed-dial): A floating action button that reveals a set of actions when triggered.
  - [Stack](/docs/components/base/stack): A component that displays items in a stacked layout with hover expansion effects, similar to Sonner toast stacking.
  - [Stat](/docs/components/base/stat): A flexible component for displaying key metrics and statistics with support for trends, indicators, and descriptions.
  - [Status](/docs/components/base/status): A flexible status indicator component with animated ping effect and color variants for displaying system states, user presence, and service health.
  - [Stepper](/docs/components/base/stepper): A component that guides users through a multi-step process with clear visual progress indicators.
  - [Swap](/docs/components/base/swap): A component that swaps between two states with click or hover activation modes.
  - [Time Picker](/docs/components/base/time-picker): An accessible time picker component with inline editing and dropdown selection. Automatically adapts to 12-hour or 24-hour format based on user locale.
  - [Timeline](/docs/components/base/timeline): A flexible timeline component for displaying chronological events with support for different orientations, RTL layouts, and visual states.
  - [Tour](/docs/components/base/tour): A guided tour component that highlights elements and provides step-by-step instructions to help users learn about your application.
- Utilities
  - [Client Only](/docs/utilities/radix/client-only): Renders client-only components with hydration and fallback support.
  - [Composition](/docs/utilities/radix/composition): A collection of utility functions for composing event handlers and refs in React components.
  - [Direction Provider](/docs/utilities/radix/direction-provider): Provides bidirectional text support (RTL/LTR) across your application.
  - [Hitbox](/docs/utilities/radix/hitbox): A utility component that extends the clickable area of child elements for improved accessibility and user experience.
  - [Portal](/docs/utilities/radix/portal): Renders React elements into a different part of the DOM tree.
  - [Pending](/docs/utilities/radix/pending): A utility component that disables interactions, maintains keyboard focus, and ensures proper accessibility for buttons, forms, links, switches, and any interactive element while they are pending.
  - [Presence](/docs/utilities/radix/presence): Manages element mounting and unmounting with animation support.
  - [Visually Hidden](/docs/utilities/radix/visually-hidden): Hides content visually while keeping it accessible to screen readers.
  - [Visually Hidden Input](/docs/utilities/radix/visually-hidden-input): A hidden input that remains accessible to assistive technology and maintains form functionality.
  - [Client Only](/docs/utilities/base/client-only): Renders client-only components with hydration and fallback support.
  - [Composition](/docs/utilities/base/composition): A collection of utility functions for composing event handlers and refs in React components.
  - [Direction Provider](/docs/utilities/base/direction-provider): Provides bidirectional text support (RTL/LTR) across your application.
  - [Hitbox](/docs/utilities/base/hitbox): A utility component that extends the clickable area of child elements for improved accessibility and user experience.
  - [Pending](/docs/utilities/base/pending): A utility component that disables interactions, maintains keyboard focus, and ensures proper accessibility for buttons, forms, links, switches, and any interactive element while they are pending.
  - [Portal](/docs/utilities/base/portal): Renders React elements into a different part of the DOM tree.
  - [Presence](/docs/utilities/base/presence): Manages element mounting and unmounting with animation support.
  - [Visually Hidden](/docs/utilities/base/visually-hidden): Hides content visually while keeping it accessible to screen readers.
  - [Visually Hidden Input](/docs/utilities/base/visually-hidden-input): A hidden input that remains accessible to assistive technology and maintains form functionality.