#What is shadcn-cssinjs?

shadcn-cssinjs is an open-source, community-led CSS-in-JS port of shadcn/ui for React developers who prefer StyleX over Tailwind CSS. It combines Base UI headless primitives with StyleX styling while keeping the familiar shadcn approach of copying component source code directly into an application. It is especially useful for teams building custom design systems, React apps, and Next.js projects where CSS-in-JS is preferred over utility-first styling.

#Features ⚡

• StyleX Styling: Replaces Tailwind-first styling with Meta’s StyleX CSS-in-JS approach.

• Base UI Primitives: Components are built on top of @base-ui/react for accessible headless behavior.

• Shadcn CLI Support: Install individual components using the standard shadcn CLI and registry URLs.

• Source-Code Ownership: Components are copied into your application so you can edit and extend them directly.

• Shared Design Tokens: Components use reusable StyleX tokens mapped to CSS variables.

• Shadcn Compatibility: Existing shadcn/ui projects can use these components alongside Tailwind-based components because they reuse common theme variables.

• Extensive Component Set: Includes more than 50 UI components covering forms, navigation, overlays, data display, charts, and layout primitives.

• RTL Support: The documentation includes dedicated RTL support.

• Registry & MCP Support: Documentation includes both registry and MCP sections for modern development workflows.

#Pro and cons

Pro ✅:

• Free and open source

• MIT licensed

• No Tailwind dependency for component styling

• Familiar shadcn-style workflow

• Built with accessible Base UI primitives

• Uses modern StyleX CSS-in-JS

• Large collection of reusable components

• Full source-code customization

• Can coexist with traditional shadcn/ui components

Cons ⚠️:

• Requires StyleX build configuration

• Additional Babel and PostCSS setup is needed

• Next.js projects using the documented Babel setup cannot use Turbopack for that pipeline.

• Smaller ecosystem than official shadcn/ui

• Developers unfamiliar with StyleX may have a learning curve

• It is an unofficial community-led port and is not affiliated with the official shadcn project.

#Included Components/Templates

shadcn-cssinjs currently provides a broad set of reusable UI components.

• 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

• Keyboard Input

• 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

#Pricing 💸

shadcn-cssinjs is completely free and open source under the MIT License. The license permits use, modification, distribution, sublicensing, and commercial use while retaining the required copyright and license notice.

• Free: $0

• Open source

• MIT License

• No advertised Pro tier

• No per-component pricing

• Commercial use permitted under the license

#Integrations 🧰

• React

• Next.js

• shadcn CLI

• shadcn Registry

• StyleX

• @base-ui/react

• TypeScript

• Babel

• PostCSS

• CSS Variables

• MCP