Skip to content

A good place to start.

Jez UI gives you source code you can adapt. Start with a React 19 and Tailwind 4 project, then install only what you need.

Prepare your project

Use Node 22.12 or newer. Configure Tailwind 4 and initialise shadcn so its CLI knows your stylesheet and component aliases.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 init

Install a component

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/button.json

The registry copies source into components/jez-ui, installs its declared dependencies, and adds the shared theme. Keep your existing theme under version control before adding a new registry.

Scroll horizontally for long lines
import { Button } from '@/components/jez-ui/ui/button';

export default function Example() {
  return <Button>Make something good</Button>;
}

Prefer the manual route?

Open any component’s Source section. Copy every listed file while preserving the ui/ and blocks/ folders, install the listed dependencies, and add the Jez theme variables and keyframes from /r/jez-theme.json to your Tailwind stylesheet. The registry source is the source used by the preview.

Fonts

The catalogue and template downloads bundle Space Grotesk and Geist. Component installations inherit your app’s fonts; install the Fontsource packages or use your own display and interface faces.

Start with a template

Download an archive, extract it, run pnpm install, then pnpm dev. Each template includes its own components, assets, theme, and integration README.