@basecn
Shadcn/ui component set re-implemented on top of MUI's Base UI headless primitives (instead of Radix). Offers 50+ components: accordion, alert, alert-dialog, aspect-ratio, autocomplete, avatar, badge, breadcrumb, button-group, button, calendar, card, carousel, chart, checkbox, collapsible, combobox (Radix + Base UI variants), command, context-menu, data-table, date-picker, dialog, drawer, dropdown-menu, empty, field, forms (React Hook Form + TanStack Form), hover-card, input-group, input-otp, item, kbd, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, and more. Tailwind CSS, TypeScript. Free, MIT-licensed. Use for: teams that prefer MUI Base UI's accessibility model over Radix but still want the shadcn/ui copy-paste workflow and visual style.
Install this registry
npx shadcn@latest add https://basecn.dev/r/registry.json pnpm dlx shadcn@latest add https://basecn.dev/r/registry.json bunx shadcn@latest add https://basecn.dev/r/registry.json curl -s https://basecn.dev/r/registry.json Components
56 totalDisplays a callout for user attention.
npx shadcn@latest add https://basecn.dev/r/alert.json A set of collapsible panels with headings.
npx shadcn@latest add https://basecn.dev/r/accordion.json An input that suggests options as you type.
npx shadcn@latest add https://basecn.dev/r/autocomplete.json A dialog that requires user response to proceed.
npx shadcn@latest add https://basecn.dev/r/alert-dialog.json Displays content within a desired ratio.
npx shadcn@latest add https://basecn.dev/r/aspect-ratio.json An easily stylable avatar component.
npx shadcn@latest add https://basecn.dev/r/avatar.json Displays a badge or a component that looks like a badge.
npx shadcn@latest add https://basecn.dev/r/badge.json Displays the path to the current resource using a hierarchy of links.
npx shadcn@latest add https://basecn.dev/r/breadcrumb.json Displays a button or a component that looks like a button.
npx shadcn@latest add https://basecn.dev/r/button.json A container that groups related buttons together with consistent styling.
npx shadcn@latest add https://basecn.dev/r/button-group.json Displays a card with header, content, and footer.
npx shadcn@latest add https://basecn.dev/r/card.json A carousel with motion and swipe built using Embla.
npx shadcn@latest add https://basecn.dev/r/carousel.json A date field component that allows users to enter and edit date.
npx shadcn@latest add https://basecn.dev/r/calendar.json A control that allows the user to toggle between checked and not checked.
npx shadcn@latest add https://basecn.dev/r/checkbox.json An interactive component which expands/collapses a panel.
npx shadcn@latest add https://basecn.dev/r/collapsible.json Fast, composable, unstyled command menu for React.
npx shadcn@latest add https://basecn.dev/r/command.json An input combined with a list of predefined items to select.
npx shadcn@latest add https://basecn.dev/r/combobox.json Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://basecn.dev/r/context-menu.json A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
npx shadcn@latest add https://basecn.dev/r/dialog.json A drawer component for React.
npx shadcn@latest add https://basecn.dev/r/drawer.json A panel that slides in from the edge of the screen.
npx shadcn@latest add https://basecn.dev/r/drawer-base.json Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://basecn.dev/r/dropdown-menu.json Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
npx shadcn@latest add https://basecn.dev/r/field.json Renders a form built with React Hook Form.
npx shadcn@latest add https://basecn.dev/r/form.json Use the Empty component to display an empty state.
npx shadcn@latest add https://basecn.dev/r/empty.json Renders a form built with Tanstack Form.
npx shadcn@latest add https://basecn.dev/r/form-tanstack.json For sighted users to preview content available behind a link.
npx shadcn@latest add https://basecn.dev/r/hover-card.json Displays a form input field or a component that looks like an input field.
npx shadcn@latest add https://basecn.dev/r/input.json Display additional information or actions to an input or textarea.
npx shadcn@latest add https://basecn.dev/r/input-group.json A versatile component that you can use to display any content.
npx shadcn@latest add https://basecn.dev/r/item.json Renders an accessible label associated with controls.
npx shadcn@latest add https://basecn.dev/r/label.json A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
npx shadcn@latest add https://basecn.dev/r/menubar.json Used to display textual user input from keyboard.
npx shadcn@latest add https://basecn.dev/r/kbd.json A collection of links for navigating websites.
npx shadcn@latest add https://basecn.dev/r/navigation-menu.json Pagination with page navigation, next and previous links.
npx shadcn@latest add https://basecn.dev/r/pagination.json Displays rich content in a portal, triggered by a button.
npx shadcn@latest add https://basecn.dev/r/popover.json Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
npx shadcn@latest add https://basecn.dev/r/progress.json A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
npx shadcn@latest add https://basecn.dev/r/radio-group.json Accessible resizable panel groups and layouts with keyboard support.
npx shadcn@latest add https://basecn.dev/r/resizable.json Augments native scroll functionality for custom, cross-browser styling.
npx shadcn@latest add https://basecn.dev/r/scroll-area.json Displays a list of options for the user to pick from—triggered by a button.
npx shadcn@latest add https://basecn.dev/r/select.json Visually or semantically separates content.
npx shadcn@latest add https://basecn.dev/r/separator.json Visually or semantically separates content.
npx shadcn@latest add https://basecn.dev/r/separator-extended.json Extends the Dialog component to display content that complements the main content of the screen.
npx shadcn@latest add https://basecn.dev/r/sheet.json A composable, themeable and customizable sidebar component.
npx shadcn@latest add https://basecn.dev/r/sidebar.json Use to show a placeholder while content is loading.
npx shadcn@latest add https://basecn.dev/r/skeleton.json An input where the user selects a value from within a given range.
npx shadcn@latest add https://basecn.dev/r/slider.json An opinionated toast component for React.
npx shadcn@latest add https://basecn.dev/r/sonner.json An indicator that can be used to show a loading state.
npx shadcn@latest add https://basecn.dev/r/spinner.json A control that allows the user to toggle between checked and not checked.
npx shadcn@latest add https://basecn.dev/r/switch.json A responsive table component.
npx shadcn@latest add https://basecn.dev/r/table.json A set of layered sections of content, known as tab panels, that are displayed one at a time.
npx shadcn@latest add https://basecn.dev/r/tabs.json Displays a form textarea or a component that looks like a textarea.
npx shadcn@latest add https://basecn.dev/r/textarea.json A two-state button that can be either on or off.
npx shadcn@latest add https://basecn.dev/r/toggle.json A set of two-state buttons that can be toggled on or off.
npx shadcn@latest add https://basecn.dev/r/toggle-group.json A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
npx shadcn@latest add https://basecn.dev/r/tooltip.json