Installation

Add components with the shadcn CLI, then let your bundler compile StyleX.

With an agent

Paste this into your coding agent. It adapts the steps below to your project.

Set up the components from https://constella.aayush.cv in this project. They install with the shadcn CLI and are styled with StyleX, not Tailwind.

1. In components.json, add "registries": { "@constella": "https://constella.aayush.cv/r/{name}.json" }. If there's no components.json, write one by hand with "style": "base-nova", "tsx": true, "rsc": false, empty "tailwind" fields ("config": "", "css": "", "baseColor": "neutral") and aliases for components, ui, lib, utils and hooks under "@/". Don't run shadcn init: it sets up Tailwind.
2. Run: npx shadcn@latest add @constella/button
3. Add StyleX's compiler to the bundler, before the React plugin: @stylexjs/unplugin/vite for Vite, or see https://github.com/facebook/stylex/tree/main/packages/%40stylexjs/unplugin. Pass the project's "@/*" alias as `aliases`, matching tsconfig.json paths.
4. In dev, load /virtual:stylex.css and import("virtual:stylex:runtime") from the HTML shell.
5. Dark mode is a `dark` class on <html>. Reuse the project's existing theme toggle if it has one.

Then render a Button and check it's styled in dev and in a production build.

Manual

Add the registry

Add registries to your components.json. If you don't have one, create it:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "tsx": true,
  "rsc": false,
  "tailwind": { "config": "", "css": "", "baseColor": "neutral" },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "utils": "@/lib/utils",
    "hooks": "@/hooks"
  },
  "registries": {
    "@constella": "https://constella.aayush.cv/r/{name}.json"
  }
}

Don't run shadcn init. It sets up Tailwind, which these components don't use.

Add components

The first one also brings the tokens, colors and StyleX.

$ npx shadcn@latest add @constella/button

Configure Vite

Add StyleX's plugin before React's, and point @/* at your source. For other bundlers, see StyleX's unplugin.

import path from "node:path";

import stylex from "@stylexjs/unplugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    stylex({
      aliases: { "@/*": [path.join(import.meta.dirname, "src/*")] },
    }),
    react(),
  ],
});

Set the same alias in tsconfig.json. StyleX and TypeScript resolve imports separately, so both need it.

{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

In dev, StyleX serves its CSS separately. Load it in index.html:

<link rel="stylesheet" href="/virtual:stylex.css" />
<script type="module">
  import("virtual:stylex:runtime");
</script>

Import components

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

export function App() {
  return <Button>Get started</Button>;
}

Dark mode

Add a dark class to <html>. next-themes and shadcn's theme setup already do this.