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. Run the installer or copy manually — The published @spaceinvoices/react-ui package can add files for you, or you can copy them directly
2. Install the minimum dependencies — The installer adds missing packages and compatible UI primitives
3. Review and adapt imports — Keep the copied primitives or swap them for your own
4. Customize freely — Modify styles, behavior, fields, and translations

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
│   ├── space-invoices-provider.tsx
│   └── entities-provider.tsx
├── hooks/                 # Copied hooks
└── lib/                   # Copied utilities

UI Primitives Are Flexible

The repository includes a components/ui/ folder with Base UI base-vega shadcn-style primitives. Configure your shadcn setup to match the installation settings before generating them. The copied kit also owns its form helpers under components/form/; copy those helpers instead of generating a shadcn form component.

You can:

• let the Space Invoices installer copy the exact primitives required by a feature
• use shadcn/ui directly
• swap to your own design system after copying

npx shadcn@latest add button input table dialog select

Next Steps

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