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

Add the optional theme item to install the dark StyleX token values. Apply its theme class and the dark class to the same ancestor.

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

$ pnpm dlx shadcn@latest add @stylexcn/theme

import * as stylex from '@stylexjs/stylex';
import { darkTheme } from '@/lib/theme.stylex';

const themeProps = stylex.props(darkTheme);

<div
  {...themeProps}
  className={['dark', themeProps.className].filter(Boolean).join(' ')}
/>

List the catalog:

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