# Docs

## changelog

- [Changelog](/docs/changelog): 👋

## undefined

- [Introduction](/docs): Caprice UI is a growing set of beautiful, modern, and accessible components built with shadcn/ui, Base UI, Tailwind CSS, React Aria Hooks, and other high-quality open source libraries.

## theming

- [Theming](/docs/theming): Using CSS Variables and color utilities for theming.

## ai

- [MCP Server](/docs/ai/mcp): How to use the Model Context Protocol with Caprice UI.

## components

- [Accordion](/docs/components/accordion): A set of collapsible panels with headings.
- [Alert Dialog](/docs/components/alert-dialog): A dialog that requires user response to proceed.
- [Alert](/docs/components/alert): Displays a callout for user attention.
- [Autocomplete](/docs/components/autocomplete): An input that suggests options as you type.
- [Avatar Group](/docs/components/avatar-group): Group avatars together.
- [Avatar](/docs/components/avatar): An easily stylable avatar component.
- [Badge](/docs/components/badge): Display bite-sized snippets of info, like notifications or labels, that you want to stand out from regular text. They're perfect for showing things like unread message counts, status updates or categories without taking up much space.
- [Button Group](/docs/components/button-group): A container that groups a set of buttons sticked together.
- [Button](/docs/components/button): Renders a button or a component that looks like a button.
- [Checkbox](/docs/components/checkbox): Renders a checkbox that allows single or multiple selections from a list of options.
- [Collapsible](/docs/components/collapsible): Collapsible component
- [Combobox](/docs/components/combobox): An input combined with a list of predefined items to select.
- [Context Menu](/docs/components/context-menu): Context Menu component
- [Dialog](/docs/components/dialog): Dialog component
- [Empty](/docs/components/empty): Use the Empty component to display an empty state.
- [Field](/docs/components/field): Field component
- [Fieldset](/docs/components/fieldset): Fieldset component
- [Form](/docs/components/form): Form component
- [Components](/docs/components): Here you can find all the components available in the library. We are working on adding more components and improving the documentation.
- [Input](/docs/components/input): Input component
- [Kbd](/docs/components/kbd): Used to display textual user input from keyboard.
- [Menu](/docs/components/menu): Menu component
- [Menubar](/docs/components/menubar): Menubar component
- [Meter](/docs/components/meter): Meter component
- [Navigation Menu](/docs/components/navigation-menu): Navigation Menu component
- [Number Field](/docs/components/number-field): Number Field component
- [Popover](/docs/components/popover): Popover component
- [Preview Card](/docs/components/preview-card): Preview Card component
- [Progress](/docs/components/progress): Progress component
- [Radio](/docs/components/radio): Radio component
- [Scroll Area](/docs/components/scroll-area): Scroll Area component
- [Select](/docs/components/select): Select component
- [Separator](/docs/components/separator): Separator component
- [Skip navigation](/docs/components/skip-navigation): Helps users quickly move past navigation, menus, and headers to reach main content.
- [Slider](/docs/components/slider): Slider component
- [Spinner](/docs/components/spinner): An indicator that can be used to show a loading state.
- [Switch](/docs/components/switch): Switch component
- [Tabs](/docs/components/tabs): Tabs component
- [Textarea](/docs/components/textarea): Textarea component
- [Toast](/docs/components/toast): Toast component
- [Toggle Group](/docs/components/toggle-group): Toggle Group component
- [Toggle](/docs/components/toggle): Toggle component
- [Toolbar](/docs/components/toolbar): Toolbar component
- [Tooltip](/docs/components/tooltip): Tooltip component

## dark-mode

- [Astro](/docs/dark-mode/astro): Adding dark mode to your astro app.
- [Dark Mode](/docs/dark-mode): Adding dark mode to your site.
- [Next.js](/docs/dark-mode/nextjs): Adding dark mode to your next app.
- [Vite](/docs/dark-mode/vite): Adding dark mode to your vite app.

## foundations

- [Colours](/docs/foundations/colours): Wip
- [Heading](/docs/foundations/typography/heading): Heading component
- [Text](/docs/foundations/typography/text): Text component

## installation

- [Astro](/docs/installation/astro): Install and configure Caprice UI for Astro.
- [Installation](/docs/installation): How to install and set up Caprice UI components in your project.
- [Laravel](/docs/installation/laravel): Install and configure Caprice UI for Laravel.
- [Manual Installation](/docs/installation/manual): Add dependencies to your project manually, step by step.
- [Next.js](/docs/installation/nextjs): Install and configure Caprice UI for Next.js.
- [React Router](/docs/installation/react-router): Install and configure Caprice UI for React Router.
- [TanStack Router](/docs/installation/tanstack-router): Install and configure Caprice UI for TanStack Router.
- [TanStack Start](/docs/installation/tanstack-start): Install and configure Caprice UI for TanStack Start.
- [Vite](/docs/installation/vite): Install and configure Caprice UI for Vite.

## utilities

- [Corner Shape](/docs/utilities/corner-shape): The corner shape utility for Tailwind CSS
- [Touch Hitbox](/docs/utilities/touch-hitbox): The touch hitbox utility for Tailwind CSS