Invoice Components

Available Components

Component	Description
`InvoiceListTable`	Paginated invoice list with filters
`CreateInvoiceForm`	Multi-step invoice creation
`CreateInvoiceScreen`	Complete create flow with responsive live preview and integration slots

InvoiceListTable

Display a paginated list of invoices:

Invoice Listtypescript

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

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

  return (
    <InvoiceListTable
      entityId={activeEntity.id}
      onRowClick={(invoice) => {
        navigate(`/invoices/${invoice.id}`);
      }}
    />
  );
}

Props

Prop	Type	Description
`entityId`	`string`	Entity ID to fetch invoices for
`onRowClick`	`(invoice) => void`	Callback when row is clicked
`filters`	`InvoiceFilters`	Initial filter values

CreateInvoiceForm

Create new invoices with customer and item selection:

Create Invoicetypescript

import { CreateInvoiceScreen } from "@/components/space-invoices/invoices/create/create-invoice-screen";
import { useEntities } from "@/providers/entities-provider";

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

  return (
    <CreateInvoiceScreen
      title="Create invoice"
      entityId={activeEntity.id}
      onSuccess={(invoice) => {
        toast.success(`Invoice ${invoice.number} created`);
        navigate(`/invoices/${invoice.id}`);
      }}
      onCancel={() => navigate("/invoices")}
    />
  );
}

Props

Prop	Type	Description
`entityId`	`string`	Entity ID
`onSuccess`	`(invoice) => void`	Called after creation
`initialValues`	`Partial<CreateInvoice>`	Pre-fill values

CreateInvoiceScreen

Install the complete reusable screen composition:

npx @spaceinvoices/react-ui@latest add invoices/create-invoice-screen

CreateInvoiceScreen owns the create form, preview state, header action, loading state, and page/embed layouts. Your application keeps ownership of route-specific behavior by injecting onSuccess, onCancel, banner, dialogs, tax callbacks, business units, and any country-specific detail fields.

The screen requires the standard Space Invoices and entities providers because both the form and preview use the active entity. It renders Save and Save as Draft actions for standalone consumers; when an existing FormFooterProvider is present, it registers with that provider so the host’s single sticky footer remains the owner. It does not include routing, analytics, subscription policy, or application dialogs.

Composing Detail And Edit Screens

The installable invoice kit is centered on:

InvoiceListTable for browsing
CreateInvoiceForm for create and edit flows
CreateInvoiceScreen for a ready-to-compose create page with live preview

For invoice detail pages, most teams compose their own screen around SDK data plus copied document components and route-specific actions. That keeps the page flexible for branding, fiscalization, custom actions, and surrounding layout.

Customization Example

Modify the invoice form to add a custom field:

// In your copied CreateInvoiceForm component
<FormField
  control={form.control}
  name="customField"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Internal Reference</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
    </FormItem>
  )}
/>

Next Steps

Customers — Customer components
Items — Item components
Customization — Deep customization