Installation
Netter UI is a shadcn-compatible registry. Components are copied into your project as editable source, so you own every line.
Requirements
- React 19 and a framework such as Next.js 15+ (App Router recommended).
- Tailwind CSS v4 configured in the project.
- Node.js 20 or newer to run the shadcn CLI.
Initialize shadcn
Run this once in a Next.js (App Router) or other React project that already uses Tailwind CSS v4. It creates components.json, the cn helper and the CSS variables the CLI expects. Skip it if your project already has a components.json.
npmnpx shadcn@latest initRegister the @netter namespace
A one-time setup per project. It adds the Netter registry to components.json so every item can be installed by name.
npmnpx shadcn@latest registry add @netter=https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/{name}.jsonAdd a component
Install any item by its slug. The source is copied into components/netter and its npm dependencies are installed for you.
npmnpx shadcn@latest add @netter/otp-inputOr install from a direct URL
No namespace needed: point the CLI straight at the item JSON. Every component page lists this command for each package manager.
npmnpx shadcn@latest add https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/otp-input.jsonpnpmpnpm dlx shadcn@latest add https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/otp-input.jsonbunbunx shadcn@latest add https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/otp-input.jsonyarnyarn dlx shadcn@latest add https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/otp-input.jsonSearch and inspect from the terminal
With the namespace registered you can list items and preview an item's files and dependencies before adding it.
searchnpx shadcn@latest search @netter -q "otp"viewnpx shadcn@latest view @netter/otp-input
Registry endpoints
- Catalog
- https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/registry.json
- Item template
- https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/{name}.json
- Example item
- https://netter-ui-app-la9g10-924acb-161-153-45-177.sslip.io/r/otp-input.json