Installation

Set up StyleX and Base UI, then install components from the shadcn-cssinjs registry.

These components are styled with StyleX and built on Base UI. Before installing any component, your project needs StyleX's build pipeline configured. Do this once, then add as many components as you like with the shadcn CLI.

Already using shadcn/ui? You can drop these components alongside your existing ones — they reuse the same CSS variables (--background, --primary, …) for theming.

Set up StyleX

Install the dependencies

pnpm add @stylexjs/stylex @base-ui/react
pnpm add -D @stylexjs/babel-plugin @stylexjs/postcss-plugin @babel/preset-typescript

Configure Babel

StyleX transforms your component source with a Babel plugin. Create a .babelrc at the root of your project:

.babelrc

{
  "presets": ["next/babel", "@babel/preset-typescript"],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "runtimeInjection": false,
        "styleResolution": "property-specificity",
        "unstable_moduleResolution": { "type": "commonJS", "rootDir": "." }
      }
    ]
  ]
}

Adding a .babelrc opts Next.js out of Turbopack/SWC for compilation. Run next dev and next build without the --turbopack flag so the Babel pipeline (and therefore StyleX) runs.

Configure PostCSS

The PostCSS plugin extracts the compiled CSS. It must run before Tailwind, and its options must match .babelrc so the class-name hashes line up.

postcss.config.mjs

const config = {
  plugins: {
    "@stylexjs/postcss-plugin": {
      include: ["app/**/*.{js,jsx,ts,tsx}", "components/**/*.{js,jsx,ts,tsx}"],
      useCSSLayers: true,
      styleResolution: "property-specificity",
      runtimeInjection: false,
      unstable_moduleResolution: { type: "commonJS", rootDir: process.cwd() },
    },
    "@tailwindcss/postcss": {},
  },
};
export default config;

Add the StyleX directive

Add @stylex; to your global stylesheet. The PostCSS plugin replaces it with the compiled component CSS.

app/globals.css

@import "tailwindcss";
 
@stylex;

Add the design tokens

Every component references a shared set of design tokens. Install them once:


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/stylex-tokens.json

This drops components/ui/tokens.stylex.ts, which maps your CSS variables to typed StyleX tokens. You can edit it to point at different variables or add your own.

Install a component


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/button.json

The component is copied into components/ui/<name>/. Import and use it:

import { Button } from "@/components/ui/button/button";
 
export function Demo() {
  return <Button>Click me</Button>;
}

Browse the components for the full list and per-component install commands.

Introduction Theming

On This Page

Set up StyleX Add the design tokens Install a component

Edit this page Follow @shadcnlabs Join community