Composite components

Higher-level components assembled from the primitives, for the patterns that recur across app surfaces. (Specialized, library-backed ones — charts, PDF viewer, kanban — are separate.)

Live

	Customer▴	Status	Total▴
	Acme Foods	submitted	$1,284
	Brave Distributors	awaiting review	$842
	Cedar Supply	error	$96

→

Search customersDelete

Drop files here or click to browsePDF purchase orders, up to 10MB

Select rows, open the customer search, the delete confirm, pick a date range, or drop a file.

DataTable

import DataTable, { type Column } from '@repo/ui/DataTable';

const columns: Column<Order>[] = [
  { key: 'customer', header: 'Customer', sortable: true },
  { key: 'total', header: 'Total', sortable: true, align: 'right', mono: true,
    render: (r) => `$${r.total}` },
];
<DataTable columns={columns} rows={orders} getRowId={(o) => o.id}
  selectable selectedIds={sel} onSelectionChange={setSel} emptyState={<EmptyState …/>} />

Data-driven table on the Table primitive: client-side sort, multi-select (header checkbox with indeterminate state), custom cell render, dense, onRowClick, empty state. Filtering stays app-level — filter the rows you pass.

FileDropzone

<FileDropzone onFiles={fn} accept="application/pdf" multiple maxSizeMB={10} /> — drag-and-drop over a real <label>+<input type=file> (click, keyboard, SR all work). Reads dropped files via DataTransfer.items first (falls back to .files), so virtual-file drags — e.g. an attachment dragged straight out of Outlook on Windows — work too. Rejects oversize files.

DateRangePicker

<DateRangePicker value={{start,end}} onChange={fn} /> — two native date inputs bounded to each other (native calendar/keyboard/locale, no calendar dependency).

ConfirmDialog

<ConfirmDialog open onOpenChange title message destructive confirmLabel onConfirm /> — focus-trapped confirm on Radix Dialog; destructive turns the confirm button red.

SearchModal

<SearchModal open onOpenChange query onQueryChange items getItemId renderItem onSelect /> — entity search. You own the (async) query + results; it owns the dialog + combobox/listbox keyboard selection (↑/↓/Enter).