- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- Typography
Introduction
Copy-paste UI components for React. Styled with StyleX on Base UI, works with the shadcn CLI.
shadcn-cssinjs provides beautifully designed, accessible, and customizable UI components. Styled with StyleX on top of Base UI primitives, and designed to work seamlessly with the shadcn CLI.
Philosophy
shadcn-cssinjs follows the shadcn model for CSS-in-JS: copy-paste components you can own, with zero lock-in and sensible defaults that work immediately.
Most shadcn setups assume Tailwind. That works well — until your team wants colocated, type-safe styles that compile to atomic CSS at build time. shadcn-cssinjs takes a different approach. It keeps the familiar component API, styles with StyleX instead of utility classes, and builds on Base UI so you can drop down to the primitives whenever you need more control.
The goal is simple: make StyleX-styled components feel like the rest of your stack — composable, themeable, accessible, and easy to customize.
Why shadcn-cssinjs?
Most CSS-in-JS component setups are either too opinionated or too scattered. shadcn-cssinjs is built for teams that want to ship quickly without giving up control:
- Own Your Code: Copy the components into your project and customize everything.
- Start Fast: Run one command and get production-ready defaults with StyleX and Base UI.
- Scale Safely: Stay close to StyleX and Base UI primitives, then drop to raw APIs when needed.