Installation

Installation guide for integrating shuip into your project

Prerequisites

Before installing shuip, make sure you have:

Installing Components

Method 1: Install via CLI

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

npx shadcn@latest add https://shuip.plvo.dev/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: