sh4dcnv2 · atlas
← libraries

@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.

56 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://basecn.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://basecn.dev/r/registry.json
bun bunx shadcn@latest add https://basecn.dev/r/registry.json
fetch registry curl -s https://basecn.dev/r/registry.json

Components

56 total
Alert ui

Displays a callout for user attention.

npx shadcn@latest add https://basecn.dev/r/alert.json
Accordion ui

A set of collapsible panels with headings.

npx shadcn@latest add https://basecn.dev/r/accordion.json
Autocomplete ui

An input that suggests options as you type.

npx shadcn@latest add https://basecn.dev/r/autocomplete.json
Alert Dialog ui

A dialog that requires user response to proceed.

npx shadcn@latest add https://basecn.dev/r/alert-dialog.json
Aspect Ratio ui

Displays content within a desired ratio.

npx shadcn@latest add https://basecn.dev/r/aspect-ratio.json
Avatar ui

An easily stylable avatar component.

npx shadcn@latest add https://basecn.dev/r/avatar.json
Badge ui

Displays a badge or a component that looks like a badge.

npx shadcn@latest add https://basecn.dev/r/badge.json
Breadcrumb ui

Displays the path to the current resource using a hierarchy of links.

npx shadcn@latest add https://basecn.dev/r/breadcrumb.json
Button ui

Displays a button or a component that looks like a button.

npx shadcn@latest add https://basecn.dev/r/button.json
Button Group ui

A container that groups related buttons together with consistent styling.

npx shadcn@latest add https://basecn.dev/r/button-group.json
Card ui

Displays a card with header, content, and footer.

npx shadcn@latest add https://basecn.dev/r/card.json
Carousel ui

A carousel with motion and swipe built using Embla.

npx shadcn@latest add https://basecn.dev/r/carousel.json
Calendar ui

A date field component that allows users to enter and edit date.

npx shadcn@latest add https://basecn.dev/r/calendar.json
Checkbox ui

A control that allows the user to toggle between checked and not checked.

npx shadcn@latest add https://basecn.dev/r/checkbox.json
Collapsible ui

An interactive component which expands/collapses a panel.

npx shadcn@latest add https://basecn.dev/r/collapsible.json
Command ui

Fast, composable, unstyled command menu for React.

npx shadcn@latest add https://basecn.dev/r/command.json
Combobox ui

An input combined with a list of predefined items to select.

npx shadcn@latest add https://basecn.dev/r/combobox.json
Context Menu ui

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
Dialog ui

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
Drawer ui

A drawer component for React.

npx shadcn@latest add https://basecn.dev/r/drawer.json
Drawer (Base UI) ui

A panel that slides in from the edge of the screen.

npx shadcn@latest add https://basecn.dev/r/drawer-base.json
Dropdown Menu ui

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
Field ui

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

npx shadcn@latest add https://basecn.dev/r/field.json
Form ui

Renders a form built with React Hook Form.

npx shadcn@latest add https://basecn.dev/r/form.json
Empty ui

Use the Empty component to display an empty state.

npx shadcn@latest add https://basecn.dev/r/empty.json
Form ui

Renders a form built with Tanstack Form.

npx shadcn@latest add https://basecn.dev/r/form-tanstack.json
Hover Card ui

For sighted users to preview content available behind a link.

npx shadcn@latest add https://basecn.dev/r/hover-card.json
Input ui

Displays a form input field or a component that looks like an input field.

npx shadcn@latest add https://basecn.dev/r/input.json
Input Group ui

Display additional information or actions to an input or textarea.

npx shadcn@latest add https://basecn.dev/r/input-group.json
Item ui

A versatile component that you can use to display any content.

npx shadcn@latest add https://basecn.dev/r/item.json
Label ui

Renders an accessible label associated with controls.

npx shadcn@latest add https://basecn.dev/r/label.json
Menubar ui

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
Kbd ui

Used to display textual user input from keyboard.

npx shadcn@latest add https://basecn.dev/r/kbd.json
Navigation Menu ui

A collection of links for navigating websites.

npx shadcn@latest add https://basecn.dev/r/navigation-menu.json
Pagination ui

Pagination with page navigation, next and previous links.

npx shadcn@latest add https://basecn.dev/r/pagination.json
Popover ui

Displays rich content in a portal, triggered by a button.

npx shadcn@latest add https://basecn.dev/r/popover.json
Progress ui

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
Radio Group ui

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
Resizable ui

Accessible resizable panel groups and layouts with keyboard support.

npx shadcn@latest add https://basecn.dev/r/resizable.json
Scroll Area ui

Augments native scroll functionality for custom, cross-browser styling.

npx shadcn@latest add https://basecn.dev/r/scroll-area.json
Select ui

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
Separator ui

Visually or semantically separates content.

npx shadcn@latest add https://basecn.dev/r/separator.json
Separator (Extended) ui

Visually or semantically separates content.

npx shadcn@latest add https://basecn.dev/r/separator-extended.json
Sheet ui

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
Sidebar item

A composable, themeable and customizable sidebar component.

npx shadcn@latest add https://basecn.dev/r/sidebar.json
Skeleton ui

Use to show a placeholder while content is loading.

npx shadcn@latest add https://basecn.dev/r/skeleton.json
Slider ui

An input where the user selects a value from within a given range.

npx shadcn@latest add https://basecn.dev/r/slider.json
Sonner ui

An opinionated toast component for React.

npx shadcn@latest add https://basecn.dev/r/sonner.json
Spinner ui

An indicator that can be used to show a loading state.

npx shadcn@latest add https://basecn.dev/r/spinner.json
Switch ui

A control that allows the user to toggle between checked and not checked.

npx shadcn@latest add https://basecn.dev/r/switch.json
Table ui

A responsive table component.

npx shadcn@latest add https://basecn.dev/r/table.json
Tabs ui

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
Textarea ui

Displays a form textarea or a component that looks like a textarea.

npx shadcn@latest add https://basecn.dev/r/textarea.json
Toggle ui

A two-state button that can be either on or off.

npx shadcn@latest add https://basecn.dev/r/toggle.json
Toggle Group ui

A set of two-state buttons that can be toggled on or off.

npx shadcn@latest add https://basecn.dev/r/toggle-group.json
Tooltip ui

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