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 Instrument Sans. Component installations inherit your app’s fonts; install @fontsource-variable/instrument-sans 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.