Yugen UI

Install with the shadcn CLI

Copy component source into your project with the shadcn CLI. Two commands: init once (adds the theme, cn(), YugenProvider, components.json and the CSS @import), then add the components you need.

npm or copy the source

The npm package (npm install yugen-ui) suits you when you want one-command upgrades and rarely change components. The shadcn CLI copies the source into your project so you can edit it directly, and you handle updates yourself. Both use the same tokens, so you can mix them.

Shorter: @yugen-ui/clinpx @yugen-ui/cli@latest init --mode source and then npx @yugen-ui/cli add button copy the same source from the same registry, with short names and no components.json or @/ alias. Details on the @yugen-ui/cli page. This page is for projects that already use the shadcn CLI.

Initialize — once per project

For a React project with Tailwind CSS v4. One command creates components.json (if missing), copies the theme + cn() + YugenProvider, installs npm packages and adds the @import to your main CSS file.

npx shadcn@latest init https://trandat1114.github.io/Yugen-UI/r/init.json

The theme lands in src/styles/yugen.css, imported from src/index.css.

The init item is a style with extends: "none": the CLI skips the default shadcn/ui style (color variables, fonts, lucide icons), so your CSS holds only Tailwind and the Yugen theme. Then wrap your app once:

import { YugenProvider } from "@/components/ui/YugenProvider/YugenProvider";
import { Button } from "@/components/ui/Button/Button";

export default function App() {
  return (
<YugenProvider applyToDocument>
  <Toaster />
      <Button appearance="primary">Hello</Button>
    </YugenProvider>
  );
}
The CLI reports a missing import alias?Vite projects made with npm create vite have no @/* alias yet. Add it to tsconfig and vite.config, then rerun:
// tsconfig.json (and tsconfig.app.json if present)
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }

// vite.config.ts
import path from "node:path";
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});

Add components

The CLI fetches the item, copies its files, pulls in the components it depends on and installs missing npm packages.

npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/button.json https://trandat1114.github.io/Yugen-UI/r/dialog.json

Result after init + add (Yugen's folder layout is kept so relative imports between components keep working):

components.json                       # created if missing
src/
  styles/yugen.css                    # theme — already @imported into src/index.css
  lib/cn.ts                           # cn() taught the Yugen scales
  lib/cvx.ts                          # variant classes, comes with Button
  components/ui/YugenProvider/…       # provider + the Tooltip and Toast it uses
  components/ui/Button/Button.tsx     # from the add command (folders kept so relative imports work)
  components/ui/Dialog/Dialog.tsx

Every component page has a shadcn CLI tab under Import with the command for that component. Need everything? Use the all item: npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/all.json. The full catalog is in registry.json.

The @yugen registry namespace

Shorter commands when adding many components (optional).

Add a registries block to components.json:

{
  "registries": {
    "@yugen": "https://trandat1114.github.io/Yugen-UI/r/{name}.json"
  }
}
npx shadcn@latest add @yugen/button @yugen/chart @yugen/sheet

Projects already on shadcn/ui

No need to rerun init — add the theme item along with your first component (Next.js uses theme-next.json):

npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/theme.json https://trandat1114.github.io/Yugen-UI/r/button.json

Updating

Copied code is yours — the CLI doesn't update it. When Yugen ships a new version (see What's new), commit your changes first, rerun add with --overwrite, then use git's diff to keep your customizations.

Notes

Yugen's own cn().Components import cn from @/lib/cn (tailwind-merge taught the Yugen scales), not shadcn's @/lib/utils.
The "use client" directive.Every component file starts with "use client" so it works in the Next.js App Router; with Vite the line is harmless.
Previous@yugen-ui/cliNextStyling