Components
React UI provides 50+ installable components organized by feature area.
Component Categories
| Category | Description | Key Components |
|---|---|---|
| Invoices | Invoice management | InvoiceListTable, CreateInvoiceForm |
| Customers | Customer management | CustomerListTable, CustomerForm |
| Items | Product/service catalog | ItemListTable, ItemForm |
| Payments | Payment recording | CreatePaymentForm |
Component Patterns
All components follow consistent patterns:
List Tables
Display data in sortable, filterable tables with pagination:
<CustomerListTable entityId={entity.id} onRowClick={(customer) => navigate(`/customers/${customer.id}`)}/>Create Forms
Create new records with validation:
<CreateInvoiceForm entityId={entity.id} onSuccess={(invoice) => navigate(`/invoices/${invoice.id}`)} onCancel={() => navigate('/invoices')}/>Compose Detail/Edit Screens
The kit focuses on installable building blocks. Detail and edit screens are typically composed in your app from SDK data hooks plus copied form components:
<CreateInvoiceForm entityId={entity.id} defaultValues={invoice} onSuccess={(updatedInvoice) => navigate(`/invoices/${updatedInvoice.id}`)}/>Data Fetching
Components use TanStack Query for data fetching. Queries are automatically cached and refetched.
// The component handles loading states internally<CustomerListTable entityId={entity.id} />Type Safety
All components are fully typed. Import types from the SDK:
import type { Invoice, Customer } from "@spaceinvoices/js-sdk";Next Steps
Explore specific component categories: