Getting Started

Why Copy-Paste?

Traditional npm packages have trade-offs:

npm Package	Copy-Paste
Updates can break your code	You control updates
Limited customization	Full ownership
Version conflicts possible	No conflicts
Black box behavior	Full visibility

React UI components are designed to be copied into your project. You own the code and can modify it freely.

How It Works

1. Initialize with the CLI — Create a config for your app structure
2. Add only what you need — Install selected components into your codebase
3. Review and adapt imports — Keep your UI primitives or swap them
4. Customize freely — Modify styles, behavior, add fields

Prerequisites

Before copying components, ensure you have:

• React 18+ project
• TanStack Query for data fetching
• shadcn/ui (or compatible UI library)
• TypeScript (recommended)

Project Structure

After copying, your project might look like:

src/
├── components/
│   └── space-invoices/    # Copied components
│       ├── invoices/
│       ├── customers/
│       ├── items/
│       └── table/
├── providers/             # Copied providers
│   ├── sdk-provider.tsx
│   └── entities-provider.tsx
├── hooks/                 # Copied hooks
└── lib/                   # Copied utilities

UI Primitives Are Flexible

The repository includes a components/ui/ folder with shadcn/ui-style components. You can:

• let the CLI install compatible primitives
• use shadcn/ui directly
• swap to your own design system after copying

npx shadcn@latest add button input form table dialog select

Next Steps

1. Installation — Install dependencies
2. Provider Setup — Configure providers