Installation

Prerequisites

Before installing shuip, make sure you have:

Node.js 18+
Next.js 13+
React 18+
TypeScript (recommended)
shadcn/ui installed and configured in your project

Installing Components

Method 1: Install via CLI

shuip is served as a shadcn registry namespace. Declare it once in your project's components.json:

components.json

{
  "registries": {
    "@shuip": "https://shuip.plvo.dev/r/{style}/{name}.json"
  }
}

The CLI replaces {style} with the style already set in your components.json and {name} with the item you ask for. The style also decides which base you get, so you never edit that part.

Then add any shuip item with the shadcn/ui CLI:

npx shadcn@latest add @shuip/input-field

The command is the same for Base UI and Radix. The @shuip namespace is the supported way to install: a URL of the form /r/<name>.json, without a style, answers 404.

Method 2: Manual Copy-Paste

You can also copy and paste the code directly from each component’s documentation page.

shuip ships every item for two bases: Base UI and Radix. You do not choose one in shuip. The style in your components.json picks it, because the CLI puts that value into the registry URL and the registry answers with the matching variant.

`style` in `components.json`	Variant you get
`base-*`	Base UI
`radix-*`	Radix
`new-york`, `new-york-v4`, `default`	Radix
`aria-*`	Not supported (React Aria)

The * stands for a preset name: base-vega and base-nova are Base UI styles, radix-vega and radix-nova are Radix styles.

A project on an aria-* style cannot install shuip items: the registry answers 404 for them, so the install fails.

The documentation follows the same split. Every component and block page exists once per base, and a switcher at the top of the page moves between them. The site remembers your last choice in a cookie and opens on Base UI the first time.

Base UI: components and blocks
Radix: components and blocks

File Structure

After installation, shuip components will be added to your project like this:

src/
├── components/
│   ├── block/
│   │   └── shuip/                 # 🆕 shuip blocks
│   │       ├── title-section.tsx
│   ├── ui/
│   │   ├── button.tsx             # shadcn/ui
│   │   ├── input.tsx              # shadcn/ui
│   │   └── shuip/                 # 🆕 shuip components
│   │       ├── input-field.tsx
│   │       ├── submit-button.tsx
│   │       └── confirmation-dialog.tsx
│   │       └── ...

TypeScript Configuration

If you're using TypeScript, make sure your tsconfig.json includes the appropriate path aliases:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"] // or "@/*": ["./*"] if your project is rooted at the top level
    }
  }
}