# basecn basecn brings you the shadcn/ui components you know and love, rebuilt on Base UI. This is what basecn offers: - **shadcn/ui Components:** The same beautiful components you know, with familiar APIs and styling. - **Base UI Foundation:** Built on Base UI for rock-solid accessibility and performance. - **Multiple Examples:** Various implementations and patterns for each component. - **Same Philosophy:** Copy, paste, and customize - no lock-in, full source code ownership. ## Get started - [Introduction](https://basecn.dev/docs/get-started/introduction): basecn offers shadcn/ui components built on Base UI. Copy, paste, and customize. - [Namespaced Registry](https://basecn.dev/docs/get-started/namespaced-registry): Install basecn components using a namespaced registry. - [RTL Support](https://basecn.dev/docs/get-started/rtl-support): Guide for implementing right-to-left (RTL) text direction support in Base UI components. - [llms.txt](https://basecn.dev/llms.txt): undefined - [Migrating from Radix UI](https://basecn.dev/docs/get-started/migrating-from-radix-ui): A guide to migrating from Radix UI to Base UI. ## Components - [Accordion](https://basecn.dev/docs/components/accordion): A set of collapsible panels with headings. - [Alert Dialog](https://basecn.dev/docs/components/alert-dialog): A dialog that requires user response to proceed. - [Alert](https://basecn.dev/docs/components/alert): Displays a callout for user attention. - [Aspect Ratio](https://basecn.dev/docs/components/aspect-ratio): Displays content within a desired ratio. - [Autocomplete](https://basecn.dev/docs/components/autocomplete): An input that suggests options as you type. - [Avatar](https://basecn.dev/docs/components/avatar): An easily stylable avatar component. - [Badge](https://basecn.dev/docs/components/badge): Displays a badge or a component that looks like a badge. - [Breadcrumb](https://basecn.dev/docs/components/breadcrumb): Displays the path to the current resource using a hierarchy of links. - [Button](https://basecn.dev/docs/components/button): Displays a button or a component that looks like a button. - [Calendar](https://basecn.dev/docs/components/calendar): A date field component that allows users to enter and edit date. - [Card](https://basecn.dev/docs/components/card): Displays a card with header, content, and footer. - [Carousel](https://basecn.dev/docs/components/carousel): A carousel with motion and swipe built using Embla. - [Chart](https://basecn.dev/docs/components/chart): Beautiful charts. Built using Recharts. Copy and paste into your apps. - [Checkbox](https://basecn.dev/docs/components/checkbox): A control that allows the user to toggle between checked and not checked. - [Collapsible](https://basecn.dev/docs/components/collapsible): An interactive component which expands/collapses a panel. - [Combobox (Base UI)](https://basecn.dev/docs/components/combobox-baseui): An input combined with a list of predefined items to select. - [Combobox (Popover + Command)](https://basecn.dev/docs/components/combobox): Autocomplete input and command palette with a list of suggestions. - [Command](https://basecn.dev/docs/components/command): Fast, composable, unstyled command menu for React. - [Context Menu](https://basecn.dev/docs/components/context-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button. - [Data Table](https://basecn.dev/docs/components/data-table): Powerful table and datagrids built using TanStack Table. - [Date Picker](https://basecn.dev/docs/components/date-picker): A date picker component with range and presets. - [Dialog](https://basecn.dev/docs/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. - [Drawer](https://basecn.dev/docs/components/drawer): A drawer component for React. - [Dropdown Menu](https://basecn.dev/docs/components/dropdown-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button. - [Form (React Hook Form)](https://basecn.dev/docs/components/form-with-react-hook-form): Renders a form built with React Hook Form. - [Form (TanStack Form)](https://basecn.dev/docs/components/form-with-tanstack-form): Building forms with TanStack Form and Zod. - [Hover Card](https://basecn.dev/docs/components/hover-card): For sighted users to preview content available behind a link. - [Input OTP](https://basecn.dev/docs/components/input-otp): Accessible one-time password component with copy paste functionality. - [Input](https://basecn.dev/docs/components/input): Displays a form input field or a component that looks like an input field. - [Label](https://basecn.dev/docs/components/label): Renders an accessible label associated with controls. - [Menubar](https://basecn.dev/docs/components/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. - [Navigation Menu](https://basecn.dev/docs/components/navigation-menu): A collection of links for navigating websites. - [Pagination](https://basecn.dev/docs/components/pagination): Pagination with page navigation, next and previous links. - [Popover](https://basecn.dev/docs/components/popover): Displays rich content in a portal, triggered by a button. - [Progress](https://basecn.dev/docs/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. - [Radio Group](https://basecn.dev/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](https://basecn.dev/docs/components/resizable): Accessible resizable panel groups and layouts with keyboard support. - [Scroll Area](https://basecn.dev/docs/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling. - [Select](https://basecn.dev/docs/components/select): Displays a list of options for the user to pick from—triggered by a button. - [Separator](https://basecn.dev/docs/components/separator): Visually or semantically separates content. - [Sheet](https://basecn.dev/docs/components/sheet): Extends the Dialog component to display content that complements the main content of the screen. - [Sidebar](https://basecn.dev/docs/components/sidebar): A composable, themeable and customizable sidebar component. - [Skeleton](https://basecn.dev/docs/components/skeleton): Use to show a placeholder while content is loading. - [Slider](https://basecn.dev/docs/components/slider): An input where the user selects a value from within a given range. - [Sonner](https://basecn.dev/docs/components/sonner): An opinionated toast component for React. - [Switch](https://basecn.dev/docs/components/switch): A control that allows the user to toggle between checked and not checked. - [Table](https://basecn.dev/docs/components/table): A responsive table component. - [Tabs](https://basecn.dev/docs/components/tabs): A set of layered sections of content, known as tab panels, that are displayed one at a time. - [Textarea](https://basecn.dev/docs/components/textarea): Displays a form textarea or a component that looks like a textarea. - [Toggle Group](https://basecn.dev/docs/components/toggle-group): A set of two-state buttons that can be toggled on or off. - [Toggle](https://basecn.dev/docs/components/toggle): A two-state button that can be either on or off. - [Tooltip](https://basecn.dev/docs/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.