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 — SDK, React Query, forms, and your UI primitives
3. Review and adapt imports — Keep the provided UI 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 shadcn/ui-style components. You can:

• 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