---
name: "@basecn"
slug: "basecn"
description: "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."
category: "Component library (general)"
tags: ["accessibility", "auth", "buttons", "cards", "charts", "components", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "akash3444"
website: "https://basecn.dev"
github: "https://github.com/akash3444/basecn"
registry: "https://basecn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 278
component_count: 56
generated_at: "2026-07-28T08:00:50.948Z"
---

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

## Links

- Website: https://basecn.dev
- GitHub: https://github.com/akash3444/basecn
- Registry JSON: https://basecn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/basecn
- This file: https://sh4dcn.vercel.app/md/basecn.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/akash3444/basecn.git
# fetch the raw registry index
curl -s https://basecn.dev/r/registry.json
```

## Components (56)

| name | type | description | install |
| --- | --- | --- | --- |
| alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://basecn.dev/r/alert.json` |
| accordion | registry:ui | A set of collapsible panels with headings. | `npx shadcn@latest add https://basecn.dev/r/accordion.json` |
| autocomplete | registry:ui | An input that suggests options as you type. | `npx shadcn@latest add https://basecn.dev/r/autocomplete.json` |
| alert-dialog | registry:ui | A dialog that requires user response to proceed. | `npx shadcn@latest add https://basecn.dev/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://basecn.dev/r/aspect-ratio.json` |
| avatar | registry:ui | An easily stylable avatar component. | `npx shadcn@latest add https://basecn.dev/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://basecn.dev/r/badge.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://basecn.dev/r/breadcrumb.json` |
| button | registry:ui | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://basecn.dev/r/button.json` |
| button-group | registry:ui | A container that groups related buttons together with consistent styling. | `npx shadcn@latest add https://basecn.dev/r/button-group.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://basecn.dev/r/card.json` |
| carousel | registry:ui | A carousel with motion and swipe built using Embla. | `npx shadcn@latest add https://basecn.dev/r/carousel.json` |
| calendar | registry:ui | A date field component that allows users to enter and edit date. | `npx shadcn@latest add https://basecn.dev/r/calendar.json` |
| checkbox | registry: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 | registry:ui | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://basecn.dev/r/collapsible.json` |
| command | registry:ui | Fast, composable, unstyled command menu for React. | `npx shadcn@latest add https://basecn.dev/r/command.json` |
| combobox | registry:ui | An input combined with a list of predefined items to select. | `npx shadcn@latest add https://basecn.dev/r/combobox.json` |
| context-menu | registry: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 | registry: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 | registry:ui | A drawer component for React. | `npx shadcn@latest add https://basecn.dev/r/drawer.json` |
| drawer-base | registry: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 | registry: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 | registry: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 | registry:ui | Renders a form built with React Hook Form. | `npx shadcn@latest add https://basecn.dev/r/form.json` |
| empty | registry:ui | Use the Empty component to display an empty state. | `npx shadcn@latest add https://basecn.dev/r/empty.json` |
| form-tanstack | registry:ui | Renders a form built with Tanstack Form. | `npx shadcn@latest add https://basecn.dev/r/form-tanstack.json` |
| hover-card | registry:ui | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://basecn.dev/r/hover-card.json` |
| input | registry: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 | registry:ui | Display additional information or actions to an input or textarea. | `npx shadcn@latest add https://basecn.dev/r/input-group.json` |
| item | registry:ui | A versatile component that you can use to display any content. | `npx shadcn@latest add https://basecn.dev/r/item.json` |
| label | registry:ui | Renders an accessible label associated with controls. | `npx shadcn@latest add https://basecn.dev/r/label.json` |
| menubar | registry: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 | registry:ui | Used to display textual user input from keyboard. | `npx shadcn@latest add https://basecn.dev/r/kbd.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites. | `npx shadcn@latest add https://basecn.dev/r/navigation-menu.json` |
| pagination | registry:ui | Pagination with page navigation, next and previous links. | `npx shadcn@latest add https://basecn.dev/r/pagination.json` |
| popover | registry:ui | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://basecn.dev/r/popover.json` |
| progress | registry: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 | registry: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 | registry:ui | Accessible resizable panel groups and layouts with keyboard support. | `npx shadcn@latest add https://basecn.dev/r/resizable.json` |
| scroll-area | registry:ui | Augments native scroll functionality for custom, cross-browser styling. | `npx shadcn@latest add https://basecn.dev/r/scroll-area.json` |
| select | registry: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 | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://basecn.dev/r/separator.json` |
| separator-extended | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://basecn.dev/r/separator-extended.json` |
| sheet | registry: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 | registry:item | A composable, themeable and customizable sidebar component. | `npx shadcn@latest add https://basecn.dev/r/sidebar.json` |
| skeleton | registry:ui | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://basecn.dev/r/skeleton.json` |
| slider | registry: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 | registry:ui | An opinionated toast component for React. | `npx shadcn@latest add https://basecn.dev/r/sonner.json` |
| spinner | registry:ui | An indicator that can be used to show a loading state. | `npx shadcn@latest add https://basecn.dev/r/spinner.json` |
| switch | registry: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 | registry:ui | A responsive table component. | `npx shadcn@latest add https://basecn.dev/r/table.json` |
| tabs | registry: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 | registry:ui | Displays a form textarea or a component that looks like a textarea. | `npx shadcn@latest add https://basecn.dev/r/textarea.json` |
| toggle | registry:ui | A two-state button that can be either on or off. | `npx shadcn@latest add https://basecn.dev/r/toggle.json` |
| toggle-group | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @basecn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/basecn.md) for the component list.
2. Fetch the machine-readable index: https://basecn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: basecn).
```