Installation

Two commands and you have your first component.

You need a React project with Tailwind CSS v4 and the @/ import alias. Next.js sets the alias up for you. With Vite, add it to your tsconfig and vite.config first.

npx yeaui init

Run this once. It adds the design tokens to your global stylesheet, creates a cn helper in lib/utils.ts and installs the few packages the components rely on.

Adding it to an existing project?

The tokens replace Tailwind's default colors, radius, font sizes, shadows and breakpoints. Classes like bg-gray-100 or rounded-lg stop working, so try it on a branch first.

npx yeaui add button dialog tabs

Add as many as you like in one go. If a component needs another one, it comes along automatically. Every page in the component index has its own command ready to copy.

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

export const SaveButton = () => <Button>Save</Button>

Components land in components/ui. They are your files now, so change whatever you want.

Put the dark class on <html> and everything switches. Any theme switcher that sets a class works, including next-themes.

document.documentElement.classList.toggle("dark")

yea-ui is a regular shadcn registry, so you can keep the CLI you already have. Add the namespace to components.json, then install by name.

{
  "registries": {
    "@yea": "https://yea-ui.vercel.app/r/{name}.json"
  }
}

npx shadcn@latest add @yea/style
npx shadcn@latest add @yea/button @yea/dialog

Every component page has a Manual tab with the packages to install and the full source. Copy the file into components/ui. You still need step 1, because the components use its tokens.

Installation

Before you start

1. Set up your project

2. Add components

3. Use them

Dark mode

Already using the shadcn CLI

Without a CLI