Skip to content

Components

React UI provides 50+ installable components organized by feature area.

Component Categories

CategoryDescriptionKey Components
InvoicesInvoice managementInvoiceListTable, CreateInvoiceForm
CustomersCustomer managementCustomerListTable, CustomerForm
ItemsProduct/service catalogItemListTable, ItemForm
PaymentsPayment recordingCreatePaymentForm

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: