Installation

Recommended: Use The CLI

npx @spaceinvoices/react-ui init
npx @spaceinvoices/react-ui add customers/create-customer-form
npx @spaceinvoices/react-ui add invoices/create-invoice-form

The CLI will:

create spaceinvoices.json
copy the required providers and utilities
install feature components into your configured paths
copy generated schema files when forms depend on them
rewrite imports to your aliases

Manual Setup

1. Install Dependencies

Install Dependenciesbash

# Core requirements
npm install @spaceinvoices/js-sdk @tanstack/react-query

# For forms
npm install react-hook-form @hookform/resolvers zod

# UI components (use shadcn/ui)
npx shadcn@latest init
npx shadcn@latest add button input form table dialog select

2. Install UI Components (shadcn/ui)

# Initialize shadcn/ui if you haven't already
npx shadcn@latest init

# Add required components
npx shadcn@latest add button input form table dialog select card badge dropdown-menu popover calendar

Or use your existing UI library and update imports in copied components.

3. Clone the Repository

git clone https://github.com/space-invoices/react-ui.git

4. Copy What You Need

Copy Componentsbash

# Required: Core utilities and providers
cp -r react-ui/src/lib/ your-project/src/lib/
cp -r react-ui/src/providers/ your-project/src/providers/
cp -r react-ui/src/hooks/ your-project/src/hooks/

# Copy the components you need
cp -r react-ui/src/components/invoices/ your-project/src/components/space-invoices/
cp -r react-ui/src/components/customers/ your-project/src/components/space-invoices/
cp -r react-ui/src/components/items/ your-project/src/components/space-invoices/
cp -r react-ui/src/components/table/ your-project/src/components/space-invoices/

# DON'T copy components/ui/ - use shadcn/ui instead

5. Copy Generated Schemas

If you copy form components manually, also copy:

cp -r react-ui/src/generated/ your-project/src/generated/

6. Update Import Paths

Update Import Pathsbash

# Replace @/ui/ imports with your path alias
find your-project/src/components/space-invoices -type f -name "*.tsx" \
  -exec sed -i '' 's/@\/ui\//@\//g' {} +

# Or manually update imports in each file:
# Before: import { Button } from "@/ui/button"
# After:  import { Button } from "@/components/ui/button"

Required Files

Always copy these core files:

Path	Purpose
`src/providers/sdk-provider.tsx`	SDK context
`src/providers/entities-provider.tsx`	Active entity context
`src/hooks/*.ts`	Shared hooks
`src/lib/utils.ts`	`cn()` utility
`src/lib/translation.ts`	i18n helper
`src/generated/schemas/*`	Generated Zod schemas used by form components

Optional Components

Copy only what you need:

Folder	Components
`components/invoices/`	Invoice forms and lists
`components/customers/`	Customer management
`components/items/`	Product/service catalog
`components/payments/`	Payment recording
`components/estimates/`	Quotes and estimates
`components/dashboard/`	Charts and stats
`components/table/`	Data table infrastructure

Next Steps

Continue to Provider Setup to configure the required providers.