# shadcn.io Documentation > Documentation for shadcn.io component library. shadcn.io is a component library built on [Tailwind CSS](https://tailwindcss.com/) and [Ark UI](https://ark-ui.com/). Components are accessible, customizable, and ready to use with your preferred framework. **Key Features:** - Beautiful by default - Professional look out of the box - Accessible - Built with accessibility best practices - Flexible - Customizable components with predictable patterns - Developer-friendly - Fully typed APIs and excellent autocompletion ## Documentation Index ### Components - [All Components](https://kit.dev/docs/components): Explore the full list of components available in the library. - [Accordion](https://kit.dev/docs/components/accordion): Open one panel or many. For FAQs, settings, and other disclosure UI. - [Action Bar](https://kit.dev/docs/components/action-bar): Display an action bar for selected items. - [Alert Dialog](https://kit.dev/docs/components/alert-dialog): A modal for critical confirmations and destructive actions. - [Alert](https://kit.dev/docs/components/alert): Displays an alert for user attention. - [Anatomy](https://kit.dev/docs/components/anatomy): Labeled part diagrams for component docs. - [Angle Slider](https://kit.dev/docs/components/angle-slider): A control for selecting an angle in a circular range. - [Announcement](https://kit.dev/docs/components/announcement): Inline notice for short, prominent updates. - [Aspect Ratio](https://kit.dev/docs/components/aspect-ratio): Wrapper that maintains aspect ratio for content. - [Autocomplete](https://kit.dev/docs/components/autocomplete): A searchable input that suggests options while allowing custom values. - [Avatar](https://kit.dev/docs/components/avatar): Displays a user's profile image with fallback. - [Badge](https://kit.dev/docs/components/badge): A compact label for status, counts, and categories. - [Bottom Navigation](https://kit.dev/docs/components/bottom-navigation): Fixed bottom nav for mobile-first apps. - [Breadcrumb](https://kit.dev/docs/components/breadcrumb): Shows the current page in a hierarchy. - [Button Group](https://kit.dev/docs/components/button-group): Visually connected buttons and related controls. - [Button](https://kit.dev/docs/components/button): Triggers an action or navigates when used as a link. - [Calendar](https://kit.dev/docs/components/calendar): Select a date, dates, or a range from an inline calendar. - [Card](https://kit.dev/docs/components/card): A surface for a single subject: header, media, body, and footer. - [Carousel](https://kit.dev/docs/components/carousel): An interactive slideshow for cycling through items. - [Chart](https://kit.dev/docs/components/chart): Visualize data with beautiful charts. - [Checkbox](https://kit.dev/docs/components/checkbox): Control for multiple selections in a set. - [Circular Progress](https://kit.dev/docs/components/circular-progress): Shows task progress with a circular indicator. - [Circular Slider](https://kit.dev/docs/components/circular-slider): A progress-ring dial for selecting an angle. - [Clipboard](https://kit.dev/docs/components/clipboard): Copy text to the clipboard. - [Collapsible](https://kit.dev/docs/components/collapsible): Collapsible content in a vertical stack. - [Color Picker](https://kit.dev/docs/components/color-picker): Pick colors with hue and alpha controls. - [Combobox](https://kit.dev/docs/components/combobox): Displays a searchable list of options. - [Command](https://kit.dev/docs/components/command): Searchable command input with filtering. - [Context Menu](https://kit.dev/docs/components/context-menu): A menu shown on right-click. - [Data List](https://kit.dev/docs/components/data-list): A list of label-value pairs. - [Date Input](https://kit.dev/docs/components/date-input): Segmented input for dates and times. - [Date Picker](https://kit.dev/docs/components/date-picker): Input with a built-in calendar. - [Dialog](https://kit.dev/docs/components/dialog): A modal window that appears on top of the main content. - [Drawer](https://kit.dev/docs/components/drawer): A sliding panel with swipe support. - [Editable](https://kit.dev/docs/components/editable): Allows user to edit text in-place. - [Field](https://kit.dev/docs/components/field): Container for inputs, labels, and helper text. - [File Upload](https://kit.dev/docs/components/file-upload): A component that allows users to upload files. - [Float](https://kit.dev/docs/components/float): Anchor an element to the edge of a container. - [Floating Panel](https://kit.dev/docs/components/floating-panel): Displays content in a floating window. - [Frame](https://kit.dev/docs/components/frame): Bordered box for grouping related content. - [Hint](https://kit.dev/docs/components/hint): Minimal tooltip for showing information. - [Hover Card](https://kit.dev/docs/components/hover-card): Popover that appears on hover. - [Image Cropper](https://kit.dev/docs/components/image-cropper): Crop and transform images. - [Image Zoom](https://kit.dev/docs/components/image-zoom): Click to zoom images, SVG, and diagrams. - [Input Group](https://kit.dev/docs/components/input-group): Group input elements together. - [Input OTP](https://kit.dev/docs/components/input-otp): Accessible one-time password input. - [Input](https://kit.dev/docs/components/input): A field that allows users to enter text. - [Item](https://kit.dev/docs/components/item): A versatile component for displaying content. - [Kbd](https://kit.dev/docs/components/kbd): Styled representation of a single key. - [Keyboard Table](https://kit.dev/docs/components/keyboard-table): Key / Description rows with keycap shortcuts. - [Link Overlay](https://kit.dev/docs/components/link-overlay): Makes the whole card or article clickable. - [Listbox](https://kit.dev/docs/components/listbox): Select a single or multiple items from a list. - [Marquee](https://kit.dev/docs/components/marquee): Scrolls items in a horizontal container. - [Menu](https://kit.dev/docs/components/menu): List of options on button interaction. - [Native Select](https://kit.dev/docs/components/native-select): Styled native HTML select element. - [Number Input](https://kit.dev/docs/components/number-input): Numeric input for entering values. - [Pagination](https://kit.dev/docs/components/pagination): Navigate through a list of items. - [Password Input](https://kit.dev/docs/components/password-input): A field for entering secure text. - [Popover](https://kit.dev/docs/components/popover): Overlay with extra info or options on trigger. - [Progress](https://kit.dev/docs/components/progress): Displays task progress with a linear indicator. - [Prose](https://kit.dev/docs/components/prose): Typography styles for HTML content. - [QR Code](https://kit.dev/docs/components/qr-code): Displays a QR code. - [Radio Group](https://kit.dev/docs/components/radio-group): Allows single selection from multiple options. - [Rating](https://kit.dev/docs/components/rating): Show reviews and ratings in a visual format. - [Resizable](https://kit.dev/docs/components/resizable): Divides the interface into resizable sections. - [Scroll Area](https://kit.dev/docs/components/scroll-area): Custom scrollable area with styled scrollbars. - [Segment Group](https://kit.dev/docs/components/segment-group): Follows the selected item. - [Select](https://kit.dev/docs/components/select): Displays a list of options. - [Separator](https://kit.dev/docs/components/separator): Visually separate content with a line. - [Sheet](https://kit.dev/docs/components/sheet): Content that slides in from the screen edge. - [Sidebar](https://kit.dev/docs/components/sidebar): A sidebar for navigation and app structure. - [Signature Pad](https://kit.dev/docs/components/signature-pad): Capture hand-drawn signatures. - [Skeleton](https://kit.dev/docs/components/skeleton): Displays a loading state. - [Skip Nav](https://kit.dev/docs/components/skip-nav): Lets keyboard users skip to main content. - [Slider](https://kit.dev/docs/components/slider): A slider for selecting a value from a range. - [Spinner](https://kit.dev/docs/components/spinner): A spinner for displaying a loading state. - [Status](https://kit.dev/docs/components/status): Color-coded status for process or state. - [Steps](https://kit.dev/docs/components/steps): Steps in a wizard-like format. - [Switch](https://kit.dev/docs/components/switch): A switch for toggling a binary state. - [Table](https://kit.dev/docs/components/table): A responsive table component. - [Tabs](https://kit.dev/docs/components/tabs): Mutually exclusive panels in one region. - [Tags Input](https://kit.dev/docs/components/tags-input): Allows users to add tags to an input field. - [Textarea](https://kit.dev/docs/components/textarea): Form textarea or textarea-styled component. - [Timer](https://kit.dev/docs/components/timer): Countdown or stopwatch with controls. - [Toast](https://kit.dev/docs/components/toast): Provides feedback on an action. - [Table of Contents](https://kit.dev/docs/components/toc): Highlights the heading in view on docs and long pages. - [Toggle Group](https://kit.dev/docs/components/toggle-group): Toggle buttons for selecting a value. - [Toggle Tooltip](https://kit.dev/docs/components/toggle-tooltip): Display information on click. - [Toggle](https://kit.dev/docs/components/toggle): Two-state button that can be toggled on or off. - [Tooltip](https://kit.dev/docs/components/tooltip): Display information on hover or focus. - [Tour](https://kit.dev/docs/components/tour): Displays a guided tour of the application. - [Tree View](https://kit.dev/docs/components/tree-view): Hierarchical data in a tree structure. - [Type Table](https://kit.dev/docs/components/type-table): Expandable Prop / Type rows for component APIs. ### Handbook - [Colors](https://kit.dev/docs/colors): Color palette and color system. - [Introduction](https://kit.dev/docs): Modern, accessible, beautifully designed UI components. - [LLMs.txt](https://kit.dev/docs/llms-txt): Let AI assistants use the compact shadcn.io documentation index. - [RTL](https://kit.dev/docs/rtl): Right-to-left support for Arabic, Hebrew, Persian, and other RTL languages. - [Skills](https://kit.dev/docs/skills): Give your agent knowledge to ship correct components, patterns, and migrations. - [Styling](https://kit.dev/docs/styling): Guide to styling components with the color system. ### Installation - [Installation](https://kit.dev/docs/installation): Get shadcn.io running in your project. - [Astro](https://kit.dev/docs/installation/astro): Install shadcn.io in an Astro project. - [Laravel](https://kit.dev/docs/installation/laravel): Install shadcn.io in a Laravel project. - [Manual Installation](https://kit.dev/docs/installation/manual): Install shadcn.io without the shadcn CLI by copying config and files manually. - [Next.js](https://kit.dev/docs/installation/next): Install shadcn.io in a Next.js project. - [React Router](https://kit.dev/docs/installation/react-router): Install shadcn.io in a React Router project. - [TanStack Start](https://kit.dev/docs/installation/tanstack-start): Install shadcn.io in a TanStack Start project. - [Vite](https://kit.dev/docs/installation/vite): Install shadcn.io in a Vite project. ### Utilities - [Client Only](https://kit.dev/docs/utilities/client-only): Render content only on the client side. - [Download Trigger](https://kit.dev/docs/utilities/download-trigger): Trigger file downloads programmatically. - [Format](https://kit.dev/docs/utilities/format): Format numbers, bytes, and time with Intl API. - [Highlight](https://kit.dev/docs/utilities/highlight): Highlight search terms within text. - [Hitbox](https://kit.dev/docs/utilities/hitbox): Expand hit areas of interactive elements without affecting layout. - [JSON Tree View](https://kit.dev/docs/utilities/json-tree-view): Display JSON data in an interactive, expandable tree. - [Presence](https://kit.dev/docs/utilities/presence): Animate components on mount and unmount. - [Show](https://kit.dev/docs/utilities/show): Conditionally render content based on a boolean value. - [Swap](https://kit.dev/docs/utilities/swap): Animate between two visual states with smooth transitions. ### Hooks - [useIsMobile](https://kit.dev/docs/hooks/use-is-mobile): Reports whether the viewport is below the mobile breakpoint. ### Forms - [Forms](https://kit.dev/docs/forms): A guide to building forms with shadcn.io components. - [Formisch](https://kit.dev/docs/forms/formisch): Build forms in React using Formisch and Valibot. - [React Hook Form](https://kit.dev/docs/forms/react-hook-form): Build forms in React using React Hook Form and Zod. - [TanStack Form](https://kit.dev/docs/forms/tanstack-form): Build forms in React using TanStack Form and Zod. ### Changelog - [January 2026 - Beta 1](https://kit.dev/docs/changelog/26-01-first-beta): First beta release with core components, blocks, templates, and theme support. - [March 2026 - Release Candidate](https://kit.dev/docs/changelog/26-03-rc): RC release with new components, utilities, theme improvements, and documentation updates. - [May 2026 - Post-RC updates](https://kit.dev/docs/changelog/26-05-post-rc): Registry listing, Hitbox utility, docs/site polish, and component fixes after the March RC. - [Changelog](https://kit.dev/docs/changelog): Notable changes to shadcn.io are documented here.