Zaytun library
Application UI
Components for data-dense finance and insurance products. Built on the Zaytun design tokens, usable by keyboard and screen reader, in light and dark themes.
Composed demos
- Claims operationsLive KPIs, volume trends, a filterable claims queue and a detail drawer with approve and reject.DataTableDrawerFilterBarTimeline
- Portfolio analyticsPerformance against benchmark with range toggle, allocation, and 80+ transactions with export.LineChartDonutChartSegmentedControl
- UnderwritingA four-step application with inline validation and drafts, then an underwriter decision screen.StepperFieldErrorSummary
StatusBadge
Workflow state as icon, label and tone. Tone tracks urgency, so meaning never rests on colour alone.
zaytun/app/StatusBadge.tsxSubtle (default)
Outline
Dot, for dense tables
ToneBadge, for any label that needs a tone
StatCard
One KPI with its trend. The arrow shows direction and the colour shows whether that direction is good.
zaytun/app/StatCard.tsxGross written premium
€12.4M
Avg. processing time
6.8 days
Loss ratio
61.3%
Policies in force
DataTable
Sortable, paginated, selectable rows with bulk actions, column visibility, density and every non-happy state.
zaytun/app/DataTable.tsx| CLM-2026-00501 | Aoife Fischer | €26,620 | Under review | |
| CLM-2026-00428 | Lorenzo Ferrari | €4,740 | Approved | |
| CLM-2026-00597 | Lorenzo Fernández | €2,650 | Pending | |
| CLM-2026-00776 | Anna Walsh | €79,480 | Rejected | |
| CLM-2026-00760 | Katarzyna Hoffmann | €62,830 | Pending |
Showing 1–5 of 18
Charts
Line, bar and donut, drawn from the theme's categorical palette. Each carries its data as a screen-reader table.
zaytun/app/Charts.tsxLineChart
Trend against a benchmark
- Portfolio
- Benchmark
| date | Portfolio | Benchmark |
|---|---|---|
| 24 Jun | 108.4 | 103.6 |
| 25 Jun | 108.9 | 104.3 |
| 26 Jun | 108.1 | 103.6 |
| 29 Jun | 108.7 | 104.4 |
| 30 Jun | 109.5 | 105.2 |
| 01 Jul | 110.2 | 105.8 |
| 02 Jul | 110.0 | 105.4 |
| 03 Jul | 110.1 | 105.3 |
| 06 Jul | 110.0 | 105.2 |
| 07 Jul | 110.5 | 105.5 |
| 08 Jul | 110.3 | 105.0 |
| 09 Jul | 110.1 | 104.9 |
| 10 Jul | 110.5 | 105.5 |
| 13 Jul | 110.4 | 105.1 |
| 14 Jul | 111.6 | 106.0 |
| 15 Jul | 111.2 | 105.7 |
| 16 Jul | 111.0 | 105.7 |
| 17 Jul | 110.8 | 105.5 |
| 20 Jul | 111.4 | 105.8 |
| 21 Jul | 111.0 | 105.1 |
| 22 Jul | 111.8 | 105.5 |
| 23 Jul | 112.7 | 106.0 |
| 24 Jul | 112.2 | 105.8 |
| 27 Jul | 111.0 | 105.1 |
| 28 Jul | 110.0 | 104.4 |
| 29 Jul | 109.9 | 104.0 |
| 30 Jul | 110.1 | 103.8 |
| 31 Jul | 109.7 | 103.5 |
| 03 Aug | 110.9 | 104.3 |
| 04 Aug | 112.0 | 105.0 |
| 05 Aug | 111.1 | 104.2 |
| 06 Aug | 110.8 | 104.2 |
| 07 Aug | 111.3 | 104.8 |
| 10 Aug | 111.7 | 105.0 |
| 11 Aug | 112.9 | 105.7 |
| 12 Aug | 111.6 | 104.9 |
| 13 Aug | 112.8 | 105.7 |
| 14 Aug | 113.1 | 105.8 |
| 17 Aug | 112.6 | 105.6 |
| 18 Aug | 111.7 | 105.1 |
| 19 Aug | 111.5 | 105.3 |
| 20 Aug | 112.6 | 106.1 |
| 21 Aug | 113.5 | 106.8 |
| 24 Aug | 114.3 | 107.5 |
| 25 Aug | 113.8 | 107.3 |
| 26 Aug | 112.8 | 106.8 |
| 27 Aug | 112.6 | 106.4 |
| 28 Aug | 110.8 | 104.7 |
| 31 Aug | 109.7 | 104.0 |
| 01 Sept | 109.1 | 103.7 |
| 02 Sept | 109.2 | 103.9 |
| 03 Sept | 108.8 | 103.7 |
| 04 Sept | 108.7 | 103.5 |
| 07 Sept | 109.3 | 103.8 |
| 08 Sept | 109.2 | 103.5 |
| 09 Sept | 110.0 | 103.8 |
| 10 Sept | 110.2 | 104.1 |
| 11 Sept | 110.1 | 103.7 |
| 14 Sept | 110.3 | 103.9 |
| 15 Sept | 110.0 | 103.7 |
| 16 Sept | 110.9 | 104.5 |
| 17 Sept | 110.8 | 104.3 |
| 18 Sept | 110.4 | 103.8 |
| 21 Sept | 110.7 | 104.0 |
| 22 Sept | 110.9 | 104.4 |
BarChart
Grouped comparison per period
- Received
- Closed
| week | Received | Closed |
|---|---|---|
| 04 Aug | 45 | 48 |
| 11 Aug | 69 | 64 |
| 18 Aug | 59 | 52 |
| 25 Aug | 59 | 64 |
| 01 Sept | 52 | 57 |
| 08 Sept | 62 | 59 |
| 15 Sept | 78 | 83 |
| 22 Sept | 60 | 62 |
DonutChart
Parts of a whole, with a legend that doubles as the data table
| Category | Value | Share |
|---|---|---|
| Equities | €2.3M | 48.1% |
| Fixed income | €1.3M | 27.0% |
| Real estate | €531.2K | 11.0% |
| Alternatives | €385.6K | 8.0% |
| Cash | €286.3K | 5.9% |
FilterBar
Search, single and multi-select, and date range, with every active filter echoed as a removable chip.
zaytun/app/FilterBar.tsx- Status: Pending
- Status: Flagged
Stepper
Where a user is in a multi-step task. Finished steps can be revisited; steps with problems are marked.
zaytun/app/Stepper.tsxStep three of four, with an error on step one
Form fields
Labelled controls with hints and errors wired for assistive tech, plus an error summary that links to each field.
zaytun/app/Field.tsx1 field needs attention
As it appears on their ID.
Enter an IBAN, like DE89 3704 0044 0532 0130 00
Drawer
Inspect or act on a record without leaving the page. Traps focus, closes on Escape and returns focus to its opener.
zaytun/app/Drawer.tsxThe claims demo uses it for claim details, with previous and next navigation.
Timeline
An activity log: who did what, when. Relative times for scanning, exact timestamps on hover.
zaytun/app/Timeline.tsxClaim approved
Miriam Kessler ·
Settlement authorised
Referred to fraud investigation
Special Investigations ·
Assigned to Miriam Kessler
Routing ·
Claim submitted via customer portal
Jonas Weber ·
Empty, error and loading
The states every data view needs, designed once so they read the same everywhere.
zaytun/app/states.tsxNo transactions yet
Trades appear here once they settle.
Something went wrong
The pricing service is unavailable.
Supporting pieces
Smaller parts the dashboards are built from: Meter, SegmentedControl, DescriptionList, Toast and Panel.
zaytun/app/*Meter: bounded scores with shared thresholds
Toast: confirms an action, announced politely
DescriptionList: record details
- Policy
- POL-NL-771204
- Holder
- Daan de Vries
- Product
- Landlord Cover
- Premium
- €2,148.90
- Deductible
- €500
- Renews
- 14 Feb 2027