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 (Recommended)

Use the shadcn/ui CLI to add the shuip components you want to your project:

npx shadcn@latest add https://shuip.xyz/r/input-field.json

Method 2: Manual Copy-Paste

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

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
    }
  }
}

Common Issues

Module Not Found Error

If you get a Module not found error, check the following:

1. That shadcn/ui is correctly installed
2. That path aliases are configured properly in tsconfig.json
3. That all required dependencies are installed

Style Conflicts

If you encounter style conflicts:

1. Ensure Tailwind CSS is properly configured
2. Verify that your globals.css includes shadcn/ui styles
3. Restart your development server

Support

If you run into issues:

• GitHub Issues
• shadcn/ui Documentation