# shadcn/ui

## Docs

- [Blocks](https://mintlify.wiki/shadcn-ui/ui/blocks.md): Pre-built blocks and templates for common UI patterns and full page layouts.
- [CLI](https://mintlify.wiki/shadcn-ui/ui/cli.md): Use the shadcn CLI to add components and manage your project.
- [shadcn add](https://mintlify.wiki/shadcn-ui/ui/cli/add.md): Add a component to your project
- [shadcn build](https://mintlify.wiki/shadcn-ui/ui/cli/build.md): Build components for a shadcn registry
- [shadcn create](https://mintlify.wiki/shadcn-ui/ui/cli/create.md): Create a new project with shadcn/ui
- [shadcn diff](https://mintlify.wiki/shadcn-ui/ui/cli/diff.md): Check for updates against the registry
- [shadcn info](https://mintlify.wiki/shadcn-ui/ui/cli/info.md): Get information about your project
- [shadcn init](https://mintlify.wiki/shadcn-ui/ui/cli/init.md): Initialize your project and install dependencies
- [shadcn mcp](https://mintlify.wiki/shadcn-ui/ui/cli/mcp.md): Start the MCP server or configure MCP clients.
- [shadcn migrate](https://mintlify.wiki/shadcn-ui/ui/cli/migrate.md): Run a migration on your components
- [shadcn registry](https://mintlify.wiki/shadcn-ui/ui/cli/registry.md): Manage custom registries and registry items.
- [shadcn search](https://mintlify.wiki/shadcn-ui/ui/cli/search.md): Search items from registries
- [shadcn view](https://mintlify.wiki/shadcn-ui/ui/cli/view.md): View items from the registry
- [components.json](https://mintlify.wiki/shadcn-ui/ui/components-json.md): Configuration for your project. This file is used by the CLI to understand how your project is set up.
- [Accordion](https://mintlify.wiki/shadcn-ui/ui/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://mintlify.wiki/shadcn-ui/ui/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://mintlify.wiki/shadcn-ui/ui/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://mintlify.wiki/shadcn-ui/ui/components/aspect-ratio.md): Displays content within a desired aspect ratio.
- [Avatar](https://mintlify.wiki/shadcn-ui/ui/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://mintlify.wiki/shadcn-ui/ui/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://mintlify.wiki/shadcn-ui/ui/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://mintlify.wiki/shadcn-ui/ui/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://mintlify.wiki/shadcn-ui/ui/components/button-group.md): Groups multiple buttons together with shared borders.
- [Calendar](https://mintlify.wiki/shadcn-ui/ui/components/calendar.md): A date calendar component for date selection.
- [Card](https://mintlify.wiki/shadcn-ui/ui/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://mintlify.wiki/shadcn-ui/ui/components/carousel.md): A carousel component for cycling through elements.
- [Chart](https://mintlify.wiki/shadcn-ui/ui/components/chart.md): Beautiful charts built using Recharts. Copy and paste into your apps.
- [Checkbox](https://mintlify.wiki/shadcn-ui/ui/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://mintlify.wiki/shadcn-ui/ui/components/collapsible.md): An interactive component which expands and collapses content.
- [Combobox](https://mintlify.wiki/shadcn-ui/ui/components/combobox.md): Autocomplete input with a list of suggestions.
- [Command](https://mintlify.wiki/shadcn-ui/ui/components/command.md): Command menu for search and quick actions.
- [Context Menu](https://mintlify.wiki/shadcn-ui/ui/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Data Table](https://mintlify.wiki/shadcn-ui/ui/components/data-table.md): Powerful tables and datagrids built using TanStack Table.
- [Date Picker](https://mintlify.wiki/shadcn-ui/ui/components/date-picker.md): A date picker component with range and presets.
- [Dialog](https://mintlify.wiki/shadcn-ui/ui/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Drawer](https://mintlify.wiki/shadcn-ui/ui/components/drawer.md): A drawer component for mobile-friendly navigation and actions.
- [Dropdown Menu](https://mintlify.wiki/shadcn-ui/ui/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Form](https://mintlify.wiki/shadcn-ui/ui/components/form.md): Building forms with React Hook Form and Zod.
- [Hover Card](https://mintlify.wiki/shadcn-ui/ui/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://mintlify.wiki/shadcn-ui/ui/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input OTP](https://mintlify.wiki/shadcn-ui/ui/components/input-otp.md): Accessible one-time password component with copy paste functionality.
- [Kbd](https://mintlify.wiki/shadcn-ui/ui/components/kbd.md): A styled keyboard key component for displaying keyboard shortcuts.
- [Label](https://mintlify.wiki/shadcn-ui/ui/components/label.md): Renders an accessible label associated with controls.
- [Menubar](https://mintlify.wiki/shadcn-ui/ui/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Navigation Menu](https://mintlify.wiki/shadcn-ui/ui/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://mintlify.wiki/shadcn-ui/ui/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://mintlify.wiki/shadcn-ui/ui/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://mintlify.wiki/shadcn-ui/ui/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Radio Group](https://mintlify.wiki/shadcn-ui/ui/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Resizable](https://mintlify.wiki/shadcn-ui/ui/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://mintlify.wiki/shadcn-ui/ui/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://mintlify.wiki/shadcn-ui/ui/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://mintlify.wiki/shadcn-ui/ui/components/separator.md): Visually or semantically separates content.
- [Sheet](https://mintlify.wiki/shadcn-ui/ui/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://mintlify.wiki/shadcn-ui/ui/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://mintlify.wiki/shadcn-ui/ui/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://mintlify.wiki/shadcn-ui/ui/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://mintlify.wiki/shadcn-ui/ui/components/sonner.md): An opinionated toast component for React.
- [Spinner](https://mintlify.wiki/shadcn-ui/ui/components/spinner.md): A loading spinner component for indicating loading states.
- [Switch](https://mintlify.wiki/shadcn-ui/ui/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://mintlify.wiki/shadcn-ui/ui/components/table.md): A responsive table component.
- [Tabs](https://mintlify.wiki/shadcn-ui/ui/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Textarea](https://mintlify.wiki/shadcn-ui/ui/components/textarea.md): A multi-line text input component that automatically resizes based on content.
- [Toast](https://mintlify.wiki/shadcn-ui/ui/components/toast.md): Display brief, temporary notifications to users.
- [Toggle](https://mintlify.wiki/shadcn-ui/ui/components/toggle.md): A two-state button that can be toggled on or off.
- [Toggle Group](https://mintlify.wiki/shadcn-ui/ui/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://mintlify.wiki/shadcn-ui/ui/components/tooltip.md): Display informative text when users hover over or focus on an element.
- [Dark Mode](https://mintlify.wiki/shadcn-ui/ui/dark-mode.md): Implement dark mode in your shadcn/ui application with support for Next.js, Vite, Astro, and other frameworks.
- [Figma Integration](https://mintlify.wiki/shadcn-ui/ui/figma.md): Design and prototype with shadcn/ui components in Figma using community-created design kits and plugins.
- [Installation](https://mintlify.wiki/shadcn-ui/ui/installation.md): How to install dependencies and structure your app.
- [Astro](https://mintlify.wiki/shadcn-ui/ui/installation/astro.md): Install and configure shadcn/ui for Astro
- [Gatsby](https://mintlify.wiki/shadcn-ui/ui/installation/gatsby.md): Install and configure Gatsby.
- [Laravel](https://mintlify.wiki/shadcn-ui/ui/installation/laravel.md): Install and configure shadcn/ui for Laravel
- [Manual Installation](https://mintlify.wiki/shadcn-ui/ui/installation/manual.md): Add dependencies to your project manually.
- [Next.js](https://mintlify.wiki/shadcn-ui/ui/installation/next.md): Install and configure shadcn/ui for Next.js.
- [Remix](https://mintlify.wiki/shadcn-ui/ui/installation/remix.md): Install and configure shadcn/ui for Remix.
- [Vite](https://mintlify.wiki/shadcn-ui/ui/installation/vite.md): Install and configure shadcn/ui for Vite.
- [shadcn/ui](https://mintlify.wiki/shadcn-ui/ui/introduction.md): Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- [JavaScript](https://mintlify.wiki/shadcn-ui/ui/javascript.md): How to use shadcn/ui with JavaScript
- [MCP Server](https://mintlify.wiki/shadcn-ui/ui/mcp.md): Use the shadcn MCP server to browse, search, and install components with AI assistants.
- [Monorepo](https://mintlify.wiki/shadcn-ui/ui/monorepo.md): Using shadcn/ui components and CLI in a monorepo.
- [Next.js 15 + React 19](https://mintlify.wiki/shadcn-ui/ui/react-19.md): Using shadcn/ui with Next.js 15 and React 19.
- [Authentication](https://mintlify.wiki/shadcn-ui/ui/registry/authentication.md): Secure your registry with authentication for private and personalized components.
- [Examples](https://mintlify.wiki/shadcn-ui/ui/registry/examples.md): Examples of registry items: styles, components, css vars, etc.
- [FAQ](https://mintlify.wiki/shadcn-ui/ui/registry/faq.md): Frequently asked questions about running a registry.
- [Getting Started](https://mintlify.wiki/shadcn-ui/ui/registry/getting-started.md): Learn how to set up and run your own component registry.
- [Introduction](https://mintlify.wiki/shadcn-ui/ui/registry/introduction.md): Run your own code registry to distribute custom components, hooks, and other resources.
- [MCP Server](https://mintlify.wiki/shadcn-ui/ui/registry/mcp.md): MCP support for registry developers
- [Namespaces](https://mintlify.wiki/shadcn-ui/ui/registry/namespace.md): Configure and use multiple resource registries with namespace support.
- [Add a Registry](https://mintlify.wiki/shadcn-ui/ui/registry/registry-index.md): Open Source Registry Index
- [registry-item.json](https://mintlify.wiki/shadcn-ui/ui/registry/registry-item-json.md): Specification for registry items.
- [registry.json](https://mintlify.wiki/shadcn-ui/ui/registry/registry-json.md): Schema for running your own component registry.
- [RTL](https://mintlify.wiki/shadcn-ui/ui/rtl.md): Right-to-left language support for shadcn/ui components.
- [Theming](https://mintlify.wiki/shadcn-ui/ui/theming.md): Customize your application's appearance using CSS variables and the shadcn/ui theming system.
- [Typography](https://mintlify.wiki/shadcn-ui/ui/typography.md): Style text elements including headings, paragraphs, lists, and inline code with shadcn/ui's typography utilities.
- [Open in v0](https://mintlify.wiki/shadcn-ui/ui/v0.md): Customize shadcn/ui components directly in v0 using natural language.