Using the shadcn CLI

miyuki-ui is a shadcn registry. The CLI reads it, copies the files into your project and installs what they need.

Add the namespaceCopy Anchor Link

Add the @miyuki-ui registry to components.json:

{
  "registries": {
    "@miyuki-ui": "https://ui.miyuki-yue.dev/r/{name}.json"
  }
}

Or let the CLI add it:

npx shadcn@latest registry add @miyuki-ui=https://ui.miyuki-yue.dev/r/{name}.json

Add componentsCopy Anchor Link

Name one or more components:

npx shadcn@latest add @miyuki-ui/button @miyuki-ui/northern-lights

For each one, the CLI:

• copies the component into components/miyuki-ui/,
• adds the shared helpers it uses to components/miyuki-ui/lib/,
• installs the packages it imports,
• adds the other miyuki-ui components it uses,
• adds the base tokens to your stylesheet.

Where the files goCopy Anchor Link

The components live in their own folder, beside shadcn's components/ui/. They never overwrite shadcn's files, so you can use both side by side.

Import them from there:

import { Button } from "@/components/miyuki-ui/button";

Without the namespaceCopy Anchor Link

Every component also has its own URL, which works without the registry entry:

npx shadcn@latest add https://ui.miyuki-yue.dev/r/button.json

Update a componentCopy Anchor Link

Run the add command again with --overwrite to replace your copy with the current version. Changes you made to that file are lost, so commit them first.

npx shadcn@latest add @miyuki-ui/button --overwrite