# shadcn-cssinjs

> A shadcn registry of components styled with StyleX (CSS-in-JS) on top of Base UI primitives. Copy, paste, and own the code. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing.

## Docs

- Get Started
  - [Introduction](https://www.shadcn-cssinjs.com/docs.md): shadcn/ui components, restyled with StyleX on top of Base UI primitives.
  - [Installation](https://www.shadcn-cssinjs.com/docs/installation.md)
  - [Theming](https://www.shadcn-cssinjs.com/docs/theming.md)
  - [RTL](https://www.shadcn-cssinjs.com/docs/rtl.md)
  - [Registry](https://www.shadcn-cssinjs.com/docs/registry.md)
  - [MCP Server](https://www.shadcn-cssinjs.com/docs/mcp.md)
  - [Changelog](https://www.shadcn-cssinjs.com/docs/changelog.md)
- Components
  - [Components](https://www.shadcn-cssinjs.com/docs/components.md): Here you can find all the components available in the library.

  - **Components**
  - [Accordion](https://www.shadcn-cssinjs.com/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
  - [Alert](https://www.shadcn-cssinjs.com/docs/components/alert.md): Displays a callout for user attention.
  - [Alert Dialog](https://www.shadcn-cssinjs.com/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
  - [Aspect Ratio](https://www.shadcn-cssinjs.com/docs/components/aspect-ratio.md): Displays content within a desired ratio.
  - [Avatar](https://www.shadcn-cssinjs.com/docs/components/avatar.md): An image element with a fallback for representing the user.
  - [Badge](https://www.shadcn-cssinjs.com/docs/components/badge.md): Displays a badge or a component that looks like a badge.
  - [Breadcrumb](https://www.shadcn-cssinjs.com/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
  - [Button](https://www.shadcn-cssinjs.com/docs/components/button.md): Displays a button or a component that looks like a button.
  - [Button Group](https://www.shadcn-cssinjs.com/docs/components/button-group.md): Groups a set of related buttons together.
  - [Calendar](https://www.shadcn-cssinjs.com/docs/components/calendar.md): A date field component that allows users to enter and edit dates.
  - [Card](https://www.shadcn-cssinjs.com/docs/components/card.md): Displays a card with header, content, and footer.
  - [Carousel](https://www.shadcn-cssinjs.com/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
  - [Chart](https://www.shadcn-cssinjs.com/docs/components/chart.md): Beautiful charts built using Recharts.
  - [Checkbox](https://www.shadcn-cssinjs.com/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
  - [Collapsible](https://www.shadcn-cssinjs.com/docs/components/collapsible.md): An interactive component which expands/collapses a panel.
  - [Combobox](https://www.shadcn-cssinjs.com/docs/components/combobox.md): Autocomplete input and command palette built by composing the Popover and Command.
  - [Command](https://www.shadcn-cssinjs.com/docs/components/command.md): Fast, composable, command menu for React.
  - [Context Menu](https://www.shadcn-cssinjs.com/docs/components/context-menu.md): Displays a menu located at the pointer, triggered by a right click.
  - [Data Table](https://www.shadcn-cssinjs.com/docs/components/data-table.md): Powerful tables and datagrids built using TanStack Table and the Table component.
  - [Date Picker](https://www.shadcn-cssinjs.com/docs/components/date-picker.md): A date picker component built by composing the Popover and Calendar.
  - [Dialog](https://www.shadcn-cssinjs.com/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window.
  - [Drawer](https://www.shadcn-cssinjs.com/docs/components/drawer.md): A drawer component that slides in from the edge of the screen.
  - [Dropdown Menu](https://www.shadcn-cssinjs.com/docs/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
  - [Hover Card](https://www.shadcn-cssinjs.com/docs/components/hover-card.md): For sighted users to preview content available behind a link.
  - [Input](https://www.shadcn-cssinjs.com/docs/components/input.md): Displays a form input field or a component that looks like an input field.
  - [Input OTP](https://www.shadcn-cssinjs.com/docs/components/input-otp.md): Accessible one-time password component with copy paste functionality.
  - [Kbd](https://www.shadcn-cssinjs.com/docs/components/kbd.md): Used to display textual user input from keyboard.
  - [Label](https://www.shadcn-cssinjs.com/docs/components/label.md): Renders an accessible label associated with controls.
  - [Menubar](https://www.shadcn-cssinjs.com/docs/components/menubar.md): A visually persistent menu common in desktop applications.
  - [Native Select](https://www.shadcn-cssinjs.com/docs/components/native-select.md): Displays a styled native select element.
  - [Navigation Menu](https://www.shadcn-cssinjs.com/docs/components/navigation-menu.md): A collection of links for navigating websites.
  - [Pagination](https://www.shadcn-cssinjs.com/docs/components/pagination.md): Pagination with page navigation, next and previous links.
  - [Popover](https://www.shadcn-cssinjs.com/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
  - [Progress](https://www.shadcn-cssinjs.com/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
  - [Radio Group](https://www.shadcn-cssinjs.com/docs/components/radio-group.md): A set of checkable buttons—where no more than one can be checked at a time.
  - [Resizable](https://www.shadcn-cssinjs.com/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
  - [Scroll Area](https://www.shadcn-cssinjs.com/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
  - [Select](https://www.shadcn-cssinjs.com/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
  - [Separator](https://www.shadcn-cssinjs.com/docs/components/separator.md): Visually or semantically separates content.
  - [Sheet](https://www.shadcn-cssinjs.com/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
  - [Sidebar](https://www.shadcn-cssinjs.com/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
  - [Skeleton](https://www.shadcn-cssinjs.com/docs/components/skeleton.md): Use to show a placeholder while content is loading.
  - [Slider](https://www.shadcn-cssinjs.com/docs/components/slider.md): An input where the user selects a value from within a given range.
  - [Sonner](https://www.shadcn-cssinjs.com/docs/components/sonner.md): An opinionated toast component for React.
  - [Spinner](https://www.shadcn-cssinjs.com/docs/components/spinner.md): An indicator that can be used to show a loading state.
  - [Switch](https://www.shadcn-cssinjs.com/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
  - [Table](https://www.shadcn-cssinjs.com/docs/components/table.md): A responsive table component.
  - [Tabs](https://www.shadcn-cssinjs.com/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
  - [Textarea](https://www.shadcn-cssinjs.com/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
  - [Toggle](https://www.shadcn-cssinjs.com/docs/components/toggle.md): A two-state button that can be either on or off.
  - [Toggle Group](https://www.shadcn-cssinjs.com/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
  - [Tooltip](https://www.shadcn-cssinjs.com/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

## Machine-readable Resources

- [Full documentation](https://www.shadcn-cssinjs.com/llms-full.txt)
- [Homepage markdown](https://www.shadcn-cssinjs.com/llms.md/content.md)
- [OpenAPI description](https://www.shadcn-cssinjs.com/openapi.json)
- [API catalog](https://www.shadcn-cssinjs.com/.well-known/api-catalog)
- [Agent skill](https://www.shadcn-cssinjs.com/.well-known/agent-skills/site-skill.md)
- [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)