# Installation

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

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



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.

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

## Set up StyleX [#set-up-stylex]

<Steps>
  <Step>
    Install the dependencies
  </Step>

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

  <Step>
    Configure Babel
  </Step>

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

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

  <Callout type="warn">
    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.
  </Callout>

  <Step>
    Configure PostCSS
  </Step>

  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.

  ```js title="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;
  ```

  <Step>
    Add the StyleX directive
  </Step>

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

  ```css title="app/globals.css"
  @import "tailwindcss";

  @stylex;
  ```
</Steps>

## Add the design tokens [#add-the-design-tokens]

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

```bash
npx shadcn@latest add https://shadcn-cssinjs.com/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 [#install-a-component]

```bash
npx shadcn@latest add https://shadcn-cssinjs.com/r/button.json
```

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

```tsx
import { Button } from "@/components/ui/button/button";

export function Demo() {
  return <Button>Click me</Button>;
}
```

Browse the [components](/docs/components) for the full list and per-component install
commands.