Installation
Installation guide for integrating shuip into your project
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
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:
- That shadcn/ui is correctly installed
- That path aliases are configured properly in
tsconfig.json
- That all required dependencies are installed
Style Conflicts
If you encounter style conflicts:
- Ensure Tailwind CSS is properly configured
- Verify that your
globals.css
includes shadcn/ui styles - Restart your development server
Support
If you run into issues: