Installation

Two ways in.

The shadcn registry copies source into your project, which is the recommended path. The npm package is useful when you want ordinary dependency updates or a quick look at the exported API.

Choose how you install

npx shadcn@latest add Tinkerers-Labs/mischief-ui/magnetic-tabs

Installing from npm needs one more line. Tailwind does not scan node_modules, so a package’s utility classes are never generated and components arrive unstyled. Point it at this one in your CSS:

@import "tailwindcss";
@source "../node_modules/mischief-ui";

The registry path copies source into your project, where it is scanned already, so it needs nothing.

Adding several

The command above names the repository every time, which is fine for one component and tiresome for six. Register the namespace once in your components.json:

{
  "registries": {
    "@mischief": "https://ui.tinkererslabs.com/r/{name}.json"
  }
}

Then every install is the short form, and the CLI resolves it against the same files the long form uses:

npx shadcn@latest add @mischief/data-table

Both paths fetch identical source. The namespace is an alias, not a different distribution, so there is nothing to migrate if you start with one and move to the other.

Compatibility

React 18 and 19
Tailwind CSS 4
shadcn CLI 4
Next.js, Vite, React Router, and other React projects supported by shadcn
Light and dark themes through semantic shadcn tokens