# 9UI Documentation Beautiful, customizable components built with Base UI and Tailwind CSS. This is a curated set of components that you can customize to fit your style. You won't install it through npm - instead, you simply select the components you need and add them directly to your project. ## Getting Started - [Astro](https://9ui.dev/docs/getting-started/dark-mode/astro.md): Setting up dark mode in your Astro project. - [Changelog](https://9ui.dev/docs/getting-started/changelog.md): Latest Updates - [Dark Mode](https://9ui.dev/docs/getting-started/dark-mode/index.md): Setting up dark mode in your project. - [Installation](https://9ui.dev/docs/getting-started/installation.md): Get started with 9ui by installing dependencies and setting up your project. - [Introduction](https://9ui.dev/docs/getting-started/introduction.md): Beautiful, customizable components built with Base UI and Tailwind CSS - [LLMs](https://9ui.dev/docs/getting-started/llms.md): AI-friendly documentation for 9ui - [Next.js](https://9ui.dev/docs/getting-started/dark-mode/next.md): Setting up dark mode in your Next.js project. - [Remix](https://9ui.dev/docs/getting-started/dark-mode/remix.md): Setting up dark mode in your Remix project. - [Roadmap](https://9ui.dev/docs/getting-started/roadmap.md): What's coming next - [Theming](https://9ui.dev/docs/getting-started/theming.md): Using CSS variables to customize the theme. - [Vite](https://9ui.dev/docs/getting-started/dark-mode/vite.md): Setting up dark mode in your Vite project. ## Components - [Accordion](https://9ui.dev/docs/components/accordion.md): A collapsible section to show or hide content. - [Alert](https://9ui.dev/docs/components/alert.md): Used to highlight important messages. - [Alert Dialog](https://9ui.dev/docs/components/alert-dialog.md): A modal dialog for critical messages or confirmation actions. - [Aspect Ratio](https://9ui.dev/docs/components/aspect-ratio.md): Allows you to display an element at a specific aspect ratio. - [Avatar](https://9ui.dev/docs/components/avatar.md): Displays an avatar with a fallback. - [Badge](https://9ui.dev/docs/components/badge.md): Displays a badge for labeling or highlighting content. - [Breadcrumbs](https://9ui.dev/docs/components/breadcrumbs.md): Displays a navigation path for better context. - [Button](https://9ui.dev/docs/components/button.md): Displays a button for user interaction. - [Calendar](https://9ui.dev/docs/components/calendar.md): Provides a visual interface for date selection. - [Card](https://9ui.dev/docs/components/card.md): Used to group and present information in a structured box. - [Carousel](https://9ui.dev/docs/components/carousel.md): A slider to display multiple items in a scrollable view. - [Chart](https://9ui.dev/docs/components/chart.md): A visual representation of data in various formats. - [Checkbox](https://9ui.dev/docs/components/checkbox.md): Displays a box that can be checked or unchecked by the user. - [Checkbox Group](https://9ui.dev/docs/components/checkbox-group.md): Manages selection state across multiple checkboxes. - [Collapsible](https://9ui.dev/docs/components/collapsible.md): Display content in a collapsible container. - [Combobox](https://9ui.dev/docs/components/combobox.md): Autocomplete component for selecting items from a list. - [Command](https://9ui.dev/docs/components/command.md): A searchable interface for quickly executing commands or actions. - [Context Menu](https://9ui.dev/docs/components/context-menu.md): Used to provide options specific to an element or area. - [Date Picker](https://9ui.dev/docs/components/date-picker.md): A date picker component. - [Dialog](https://9ui.dev/docs/components/dialog.md): A modal window for displaying content. - [Drawer](https://9ui.dev/docs/components/drawer.md): Displays a panel that slides out from the side of a screen to reveal more content. - [Dropdown Menu](https://9ui.dev/docs/components/dropdown-menu.md): Used to display a list of options to the user. - [Emoji Picker](https://9ui.dev/docs/components/emoji-picker.md): A component that allows users to pick an emoji. - [Form](https://9ui.dev/docs/components/form.md): A structured component for collecting and validating data. - [Input](https://9ui.dev/docs/components/input.md): A component that allows users to input text. - [Input OTP](https://9ui.dev/docs/components/input-otp.md): A component for entering OTP codes. - [Kbd](https://9ui.dev/docs/components/kbd.md): Displays keyboard shortcuts or keypresses. - [Menubar](https://9ui.dev/docs/components/menubar.md): Displays a top-level bar with expandable menus for easy access. - [Meter](https://9ui.dev/docs/components/meter.md): Used to represent a value within a fixed scale. - [Navigation Menu](https://9ui.dev/docs/components/navigation-menu.md): A menu for navigating between different sections or pages. - [Number Field](https://9ui.dev/docs/components/number-field.md): A numeric input with increment, decrement, and scrub controls. - [Pagination](https://9ui.dev/docs/components/pagination.md): A control for navigating between pages of content. - [Popover](https://9ui.dev/docs/components/popover.md): A popup for displaying content. - [Preview Card](https://9ui.dev/docs/components/preview-card.md): Used to display a preview of content when hovered. - [Progress](https://9ui.dev/docs/components/progress.md): Displays a progress bar with an optional label. - [Radio Group](https://9ui.dev/docs/components/radio-group.md): A set of radio buttons for selecting one option from a group. - [Scroll Area](https://9ui.dev/docs/components/scroll-area.md): A component for creating scrollable regions. - [Select](https://9ui.dev/docs/components/select.md): A dropdown menu for choosing one option from a list.. - [Separator](https://9ui.dev/docs/components/separator.md): Displays a divider to organize content visually or contextually. - [Sheet](https://9ui.dev/docs/components/sheet.md): A sliding panel for displaying content. - [Skeleton](https://9ui.dev/docs/components/skeleton.md): Displays a loading state for a component. - [Slider](https://9ui.dev/docs/components/slider.md): A control for selecting a value within a range. - [Sonner](https://9ui.dev/docs/components/sonner.md): Displays a message to the user in a toast. - [Switch](https://9ui.dev/docs/components/switch.md): A toggle control for switching between two states. - [Table](https://9ui.dev/docs/components/table.md): Used to organize and present information in a tabular format. - [Tabs](https://9ui.dev/docs/components/tabs.md): Used to organize content into tabbed navigation. - [Textarea](https://9ui.dev/docs/components/textarea.md): A component that allows users to input long text. - [Toast](https://9ui.dev/docs/components/toast.md): Displays a message to the user in a toast. - [Toggle](https://9ui.dev/docs/components/toggle.md): Displays a control to toggle between two states. - [Toggle Group](https://9ui.dev/docs/components/toggle-group.md): A group of toggles for selecting single or multiple options. - [Toolbar](https://9ui.dev/docs/components/toolbar.md): Displays a toolbar for user interaction. - [Tooltip](https://9ui.dev/docs/components/tooltip.md): Used to provide context or hints for elements.