# Documentation

- [Get started](/docs/get-started): How to install dependencies and structure your app.
- [Introduction](/docs): UILab contains everything you need to know about frontend development from component documentation to maintaining a whole project.
- [Styling](/docs/styling): A guide to styling components with our color system.
- [Confirmation Dialog](/docs/blocks/confirmation): The Confirmation Dialog component provides a consistent way to ask users for confirmation before performing destructive or important actions
- [Data Grid](/docs/blocks/data-grid): The DataGrid component is designed to handle large datasets efficiently while offering a rich set of features for customization and interactivity.
- [Data Table](/docs/blocks/data-table): Powerful data table built using TanStack Table.
- [Date Picker](/docs/blocks/date-picker): a date picker component with range and presets
- [Form Fields](/docs/blocks/form-fields): ready-to-use form components designed to work seamlessly with react-hook-form
- [Blocks](/docs/blocks): Custom block components for our internal use
- [Layout](/docs/blocks/layout): Global layout component
- [Sonner](/docs/blocks/sonner): An opinionated toast component for React.
- [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.
- [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): undefined
- [Calendar](/docs/components/calendar): A calendar component that allows users to select a date or a range of dates.
- [Card](/docs/components/card): Displays a card with header, content, and footer.
- [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.
- [Command](/docs/components/command): Command menu for search and quick actions.
- [Context Menu](/docs/components/context-menu): Displays a menu of actions triggered by a right click.
- [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 drawer component for React.
- [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): Use the Empty component to display an empty state.
- [Field](/docs/components/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Hover Card](/docs/components/hover-card): Displays a badge or a component that looks like a badge.
- [Components](/docs/components): undefined
- [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): A text input component for forms and user data entry with built-in styling and accessibility features.
- [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): Visually or semantically separates content.
- [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.
- [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.
- [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.