# Apsara

## Docs

- [useCopyToClipboard](https://mintlify.wiki/raystack/apsara/api/hooks/use-copy-to-clipboard.md): A React hook for copying text to the clipboard with state management.
- [useDebouncedState](https://mintlify.wiki/raystack/apsara/api/hooks/use-debounced-state.md): A React hook that debounces state updates with optional leading edge execution.
- [useIsomorphicLayoutEffect](https://mintlify.wiki/raystack/apsara/api/hooks/use-isomorphic-layout-effect.md): A React hook that uses useLayoutEffect on the client and useEffect on the server for SSR compatibility.
- [useMouse](https://mintlify.wiki/raystack/apsara/api/hooks/use-mouse.md): A React hook for tracking mouse position relative to an element or the viewport.
- [useTheme](https://mintlify.wiki/raystack/apsara/api/hooks/use-theme.md): A React hook for accessing and managing theme state in Apsara applications.
- [Icons](https://mintlify.wiki/raystack/apsara/api/icons.md): Pre-built SVG icons available in the Apsara component library.
- [Colors](https://mintlify.wiki/raystack/apsara/api/utilities/colors.md): The Apsara color system including semantic colors, primitives, and visualization colors.
- [Styling](https://mintlify.wiki/raystack/apsara/api/utilities/styling.md): CSS variables, design tokens, and styling utilities in the Apsara design system.
- [Accordion](https://mintlify.wiki/raystack/apsara/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Amount](https://mintlify.wiki/raystack/apsara/components/amount.md): Display formatted monetary values with automatic currency conversion and localization.
- [Announcement bar](https://mintlify.wiki/raystack/apsara/components/announcement-bar.md): A horizontal bar component for displaying announcements and notifications.
- [Avatar](https://mintlify.wiki/raystack/apsara/components/avatar.md): Display user profile images with automatic fallbacks and color variants.
- [Badge](https://mintlify.wiki/raystack/apsara/components/badge.md): Display small status indicators, labels, and counts with various visual styles.
- [Box](https://mintlify.wiki/raystack/apsara/components/box.md): A fundamental layout component that serves as a basic building block with box-sizing applied
- [Breadcrumb](https://mintlify.wiki/raystack/apsara/components/breadcrumb.md): A navigation component that displays the current page's location within a hierarchical structure.
- [Button](https://mintlify.wiki/raystack/apsara/components/button.md): A versatile button component with multiple variants, sizes, and states for user interactions.
- [Calendar](https://mintlify.wiki/raystack/apsara/components/calendar.md): Calendar components for date selection including single dates and date ranges.
- [Callout](https://mintlify.wiki/raystack/apsara/components/callout.md): A component for displaying important messages, alerts, or highlighted information with optional actions.
- [Checkbox](https://mintlify.wiki/raystack/apsara/components/checkbox.md): A checkbox input component for binary choices and selection lists.
- [Chip](https://mintlify.wiki/raystack/apsara/components/chip.md): Compact elements for displaying tags, filters, or selections with dismissible options.
- [Code block](https://mintlify.wiki/raystack/apsara/components/code-block.md): Display syntax-highlighted code with copy functionality and language selection.
- [Collapsible](https://mintlify.wiki/raystack/apsara/components/collapsible.md): An interactive component that can be expanded or collapsed to show and hide content.
- [Color picker](https://mintlify.wiki/raystack/apsara/components/color-picker.md): A color picker component for selecting and adjusting colors.
- [Combobox](https://mintlify.wiki/raystack/apsara/components/combobox.md): An autocomplete input component that combines a text input with a dropdown list.
- [Command](https://mintlify.wiki/raystack/apsara/components/command.md): A command palette component for keyboard-driven navigation and actions.
- [Container](https://mintlify.wiki/raystack/apsara/components/container.md): A responsive container component with predefined max-width sizes and alignment options
- [Copy button](https://mintlify.wiki/raystack/apsara/components/copy-button.md): A button that copies text to the clipboard with visual feedback.
- [Data table](https://mintlify.wiki/raystack/apsara/components/data-table.md): Enterprise-grade data table with TanStack Table integration, sorting, filtering, pagination, and virtualization.
- [Dialog](https://mintlify.wiki/raystack/apsara/components/dialog.md): A modal dialog component that displays content in an overlay with backdrop, supporting nested dialogs and keyboard navigation.
- [Drawer](https://mintlify.wiki/raystack/apsara/components/drawer.md): A slide-in panel component that appears from the edge of the screen, with swipe-to-dismiss functionality.
- [Empty state](https://mintlify.wiki/raystack/apsara/components/empty-state.md): Communicate when content is unavailable with actionable empty states.
- [Filter chip](https://mintlify.wiki/raystack/apsara/components/filter-chip.md): An interactive chip component for building dynamic filters with operations and values.
- [Flex](https://mintlify.wiki/raystack/apsara/components/flex.md): A flexbox container component with convenient props for controlling flex layout properties
- [Grid](https://mintlify.wiki/raystack/apsara/components/grid.md): A CSS Grid layout component with support for template areas, auto-flow, and flexible sizing
- [Headline](https://mintlify.wiki/raystack/apsara/components/headline.md): Display headings with consistent typography and semantic HTML.
- [Icon button](https://mintlify.wiki/raystack/apsara/components/icon-button.md): A button designed to contain an icon without text.
- [Image](https://mintlify.wiki/raystack/apsara/components/image.md): Display images with automatic fallback handling and responsive sizing.
- [Indicator](https://mintlify.wiki/raystack/apsara/components/indicator.md): A visual indicator that displays status, notifications, or presence information, typically shown as a badge or dot.
- [Input field](https://mintlify.wiki/raystack/apsara/components/input-field.md): A text input component with support for labels, validation, icons, and chip display.
- [Label](https://mintlify.wiki/raystack/apsara/components/label.md): Accessible labels for form inputs with support for required field indicators.
- [Link](https://mintlify.wiki/raystack/apsara/components/link.md): Navigational links with text styling variants and external link handling.
- [List](https://mintlify.wiki/raystack/apsara/components/list.md): Display structured key-value pairs and data in a consistent list format.
- [Menu](https://mintlify.wiki/raystack/apsara/components/menu.md): A dropdown menu component with support for submenus, keyboard navigation, and optional autocomplete filtering.
- [Navbar](https://mintlify.wiki/raystack/apsara/components/navbar.md): A horizontal navigation bar component for displaying site-wide navigation and branding.
- [Popover](https://mintlify.wiki/raystack/apsara/components/popover.md): A floating content container that appears relative to a trigger element with smart positioning.
- [Radio](https://mintlify.wiki/raystack/apsara/components/radio.md): A radio button component for selecting a single option from a group.
- [Scroll area](https://mintlify.wiki/raystack/apsara/components/scroll-area.md): A customizable scrollable area with styled scrollbars.
- [Search](https://mintlify.wiki/raystack/apsara/components/search.md): A search input component with a magnifying glass icon and optional clear button.
- [Select](https://mintlify.wiki/raystack/apsara/components/select.md): A dropdown select component for choosing options from a list.
- [Separator](https://mintlify.wiki/raystack/apsara/components/separator.md): Visually separates content sections with a horizontal or vertical line.
- [Side panel](https://mintlify.wiki/raystack/apsara/components/side-panel.md): A fixed sidebar component for displaying supplementary content alongside the main content area.
- [Sidebar](https://mintlify.wiki/raystack/apsara/components/sidebar.md): A collapsible navigation sidebar component for organizing hierarchical navigation.
- [Skeleton](https://mintlify.wiki/raystack/apsara/components/skeleton.md): A placeholder component that displays an animated loading state to indicate content is being loaded.
- [Slider](https://mintlify.wiki/raystack/apsara/components/slider.md): A slider component for selecting numeric values within a range.
- [Spinner](https://mintlify.wiki/raystack/apsara/components/spinner.md): A loading indicator that shows an animated spinning state to indicate processing or loading.
- [Switch](https://mintlify.wiki/raystack/apsara/components/switch.md): A toggle switch component for binary on/off states.
- [Table](https://mintlify.wiki/raystack/apsara/components/table.md): A flexible table component for displaying tabular data with semantic HTML structure.
- [Tabs](https://mintlify.wiki/raystack/apsara/components/tabs.md): A tabbed interface component for organizing content into separate views.
- [Text](https://mintlify.wiki/raystack/apsara/components/text.md): Flexible text component with extensive typography controls and variant styles.
- [Text area](https://mintlify.wiki/raystack/apsara/components/text-area.md): A multi-line text input component for longer form content.
- [Theme provider](https://mintlify.wiki/raystack/apsara/components/theme-provider.md): A provider component for managing theme state and appearance across the application.
- [Toast](https://mintlify.wiki/raystack/apsara/components/toast.md): A non-blocking notification that appears temporarily to provide feedback about an operation.
- [Tooltip](https://mintlify.wiki/raystack/apsara/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Accessibility](https://mintlify.wiki/raystack/apsara/guides/accessibility.md): Learn about accessibility features in Apsara components and how to build inclusive applications
- [Dark mode](https://mintlify.wiki/raystack/apsara/guides/dark-mode.md): Implement dark mode in your Apsara application with ThemeProvider
- [Styling](https://mintlify.wiki/raystack/apsara/guides/styling.md): Learn how to style Apsara components using vanilla CSS and data attributes
- [Theming](https://mintlify.wiki/raystack/apsara/guides/theming.md): Learn how to customize the visual appearance of Apsara components using CSS variables
- [Installation](https://mintlify.wiki/raystack/apsara/installation.md): Learn how to install and set up Apsara in your React project
- [Introduction](https://mintlify.wiki/raystack/apsara/introduction.md): Apsara is an open-source React UI component library built on Radix UI primitives and vanilla CSS for building accessible, enterprise-grade data interfaces
- [Quick start](https://mintlify.wiki/raystack/apsara/quickstart.md): Get up and running with Apsara by building a simple application