Components

Implemented StyleX components. Each page is a live demo - click, type, and open overlays. Pixel-perfect with official shadcn/ui.

Install

Add a component with the official shadcn CLI. The consumer project must already compile StyleX (@stylexjs/stylex plus a bundler plugin). Tailwind init is not enough.

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

Optional namespace:

$ pnpm dlx shadcn@latest registry add @stylexcn=https://stylexcn.vercel.app/r/{name}.json

$ pnpm dlx shadcn@latest add @stylexcn/button

Dark mode

Install the ThemeProvider for persistent light, dark, and system modes. It installs the dark StyleX theme automatically and keeps both theme classes synchronized. In Next.js, add suppressHydrationWarning to the root HTML element because the provider updates its classes.

$ pnpm dlx shadcn@latest add https://stylexcn.vercel.app/r/theme-provider.json

$ pnpm dlx shadcn@latest add @stylexcn/theme-provider

import { ThemeProvider } from '@/components/theme-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en' suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

List the catalog:

$ pnpm dlx shadcn@latest list https://stylexcn.vercel.app/r/registry.json