React UI

The Space Invoices React UI kit provides copy-paste React components for building invoicing applications. The published @spaceinvoices/react-ui package includes an installer that pulls components into your app, but the core model stays the same: you end up owning the copied code and can customize it freely.

Philosophy

• Full ownership — Modify freely without breaking changes
• Complete customization — Change behavior and structure
• No version conflicts — You control when to update
• Zero lock-in — Components work standalone in your codebase

Choose This Path If

• you are already shipping React
• you want faster delivery than building every invoicing screen yourself
• you still want to own, restyle, and extend the component code
• you need tighter product integration than an iframe can give you

Tradeoff

You still need to wire providers, data fetching, and your design system. If you want less frontend ownership, use the Embed SDK. If you want lower-level control, use the JavaScript SDK.

What’s Included

Category	Components
Invoices	Installable list and create flows
Customers	Management, search, forms
Items	Product/service catalog
Payments	Payment recording flows
Estimates	Estimate and proforma invoice creation, conversion
Dashboard	Revenue charts, stats
Entities	Business settings

Quick Example

import { CustomerListTable } from "@/components/space-invoices/customers";
import { useEntities } from "@/providers/entities-provider";

function CustomersPage() {
  const { activeEntity } = useEntities();

  return (
    <CustomerListTable
      entityId={activeEntity.id}
      onRowClick={(customer) => console.log("Selected:", customer)}
    />
  );
}

Next Steps

1. Getting Started — understand the ownership model
2. Installation — install dependencies and copy the minimum required files
3. Provider Setup — connect entities and auth
4. Components — choose the screens you actually need
5. Customization — adapt structure, behavior, and styles