# Documentation

- [Introduction](/docs): Welcome to Exabase Design System documentation.
- Getting Started
  - Installation
    - [Installation](/docs/getting-started/installation): How to install dependencies and structure your app.
    - [Next.js](/docs/getting-started/installation/next): Install and configure Next.js.
    - [Vite](/docs/getting-started/installation/vite): Install and configure Vite.
    - [Manual](/docs/getting-started/installation/manual): Add dependencies to your project manually.
  - [Theming](/docs/getting-started/theming): Understand the theming system and how to customize design tokens.
  - Dark Mode
    - [Dark mode](/docs/getting-started/dark-mode): Adding dark mode to your site.
    - [Next.js](/docs/getting-started/dark-mode/next): Adding dark mode to your Next.js app.
    - [Vite](/docs/getting-started/dark-mode/vite): Adding dark mode to your vite app.
  - [Changelog](/docs/getting-started/changelog)
  - [Migrating to V4](/docs/getting-started/about-v4): Step-by-step guide for migrating from V3 to V4 of the exaBase Design System.
- Styles
  - [Colors](/docs/styles/colors)
  - [Elevation](/docs/styles/elevation): Offers a set of elevations consisting of border and shadows.
  - [Icon](/docs/styles/icons): Display exaBase Design System Icons.
  - [Rounded](/docs/styles/rounded)
- Components
  - [Accordion](/docs/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content.
  - [Alert Dialog](/docs/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
  - [Alert](/docs/components/alert): Displays a callout for user attention.
  - [Aspect Ratio](/docs/components/aspect-ratio): Displays content within a desired ratio.
  - [Autocomplete](/docs/components/autocomplete): An input that suggests options as you type.
  - [Avatar](/docs/components/avatar): An image element with a fallback for representing the user.
  - [Badge](/docs/components/badge): Displays a badge or a component that looks like a badge.
  - [Breadcrumb](/docs/components/breadcrumb): Displays the path to the current resource using a hierarchy of links.
  - [Button Group](/docs/components/button-group): A container that groups related buttons together with consistent styling.
  - [Button](/docs/components/button): Displays a button or a component that looks like a button.
  - [Calendar](/docs/components/calendar): A date field component that allows users to enter and edit date.
  - [Card](/docs/components/card): Displays a card with header, content, and footer.
  - [Carousel](/docs/components/carousel): A carousel with motion and swipe built using Embla.
  - [Checkbox](/docs/components/checkbox): A control that allows the user to toggle between checked and not checked.
  - [Collapsible](/docs/components/collapsible): An interactive component which expands/collapses a panel.
  - [Combobox](/docs/components/combobox): Autocomplete input with a list of suggestions.
  - [Command](/docs/components/command): Fast, composable, unstyled command menu for React.
  - [Context Menu](/docs/components/context-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
  - [Data Table](/docs/components/data-table): Powerful data tables built with @tanstack/react-table.
  - [Date Picker](/docs/components/date-picker)
  - [Dialog](/docs/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
  - [Drawer](/docs/components/drawer): A panel that slides in from the edge of the screen, with support for swipe gestures to dismiss, making it mobile-friendly.
  - [Dropdown Menu](/docs/components/dropdown-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
  - [Empty](/docs/components/empty): Displays an empty state with a title, description, and optional actions.
  - [Field](/docs/components/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
  - [Hover Card](/docs/components/hover-card): For sighted users to preview content available behind a link.
  - [Input Group](/docs/components/input-group): Add addons, buttons, and helper content to inputs.
  - [Input OTP](/docs/components/input-otp): Accessible one-time password component with copy paste functionality.
  - [Input](/docs/components/input): Displays a form input field or a component that looks like an input field.
  - [Item](/docs/components/item): A versatile component for displaying content with media, title, description, and actions.
  - [Kbd](/docs/components/kbd): Used to display textual user input from keyboard.
  - [Label](/docs/components/label): Renders an accessible label associated with controls.
  - [Menubar](/docs/components/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
  - [Navigation Menu](/docs/components/navigation-menu): A collection of links for navigating websites.
  - [Pagination](/docs/components/pagination): Pagination with page navigation, next and previous links.
  - [Popover](/docs/components/popover): Displays rich content in a portal, triggered by a button.
  - [Progress](/docs/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
  - [Radio Group](/docs/components/radio-group): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
  - [Resizable](/docs/components/resizable): Accessible resizable panel groups and layouts with keyboard support.
  - [Scroll Area](/docs/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling.
  - [Select](/docs/components/select): Displays a list of options for the user to pick from—triggered by a button.
  - [Separator](/docs/components/separator): A separator element accessible to screen readers.
  - [Sheet](/docs/components/sheet): Extends the Dialog component to display content that complements the main content of the screen.
  - [Sidebar](/docs/components/sidebar): A composable, themeable and customizable sidebar component.
  - [Skeleton](/docs/components/skeleton): Use to show a placeholder while content is loading.
  - [Slider](/docs/components/slider): An input where the user selects a value from within a given range.
  - [Spinner](/docs/components/spinner): An indicator that can be used to show a loading state.
  - [Switch](/docs/components/switch): A control that allows the user to toggle between checked and not checked.
  - [Table](/docs/components/table): A responsive table component.
  - [Tabs](/docs/components/tabs): A set of layered sections of content—known as tab panels—that are displayed one at a time.
  - [Textarea](/docs/components/textarea): Displays a form textarea or a component that looks like a textarea.
  - [Toast](/docs/components/toast): A temporary notification that appears on screen to inform users.
  - [Toggle Group](/docs/components/toggle-group): A set of two-state buttons that can be toggled on or off.
  - [Toggle](/docs/components/toggle): A two-state button that can be either on or off.
  - [Tooltip](/docs/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

- **Resources**
- [Blog](/docs/blog)
- [V3 Docs](/exabase/design/v3/docs/getting-started/introduction)
- [llms.txt](/exabase/design/llms.txt)
- [llms-full.txt](/exabase/design/llms-full.txt)