UI showcase
Every shared component, split across dedicated pages by category.
Heading scale
Geist, tight scale — hierarchy comes from size and weight, not colour.
H1 — Revenue overview
H2 — Quarterly performance
H3 — Top selling products
H4 — Refund rate by channel
H5 — Payment method breakdown
H6 — Last 7 days
Body, caption, muted
Body text never drops below 13px; secondary text uses `text-muted-foreground`, not a lighter weight.
Regular body copy, used for card content and form descriptions. It sits at a comfortable reading size and pairs with tabular numerals wherever a metric appears inline, like $84,210.
Small body text — the most common size in this template, used across tables, list rows and settings forms.
Muted secondary text, for descriptions and helper copy under a heading or field.
Caption — timestamps, row counts, and fine print.
Monospace / tabular numerals
Geist Mono for numbers in tables, code, IDs and metrics — never the sans figure glyphs.
Invoice INV-2026-0091 — $2,480.00
Order #ORD-40218 — 12 items
igr_live_8f2a1c9e4b7d0351affe22c0918abf4
Inline and block code
Monospace with a muted background, for API keys, env vars and snippets.
Set the NEXT_PUBLIC_API_URL environment variable before running the build.
pnpm build
pnpm typecheck
pnpm lintProse sample
A short passage of realistic content — help-center article length — to check line length, spacing and link styling together.
Igris ships with a local seed data layer instead of a live backend — every list, chart and detail page reads from typed TypeScript modules under src/data/. That keeps the demo fast and fully offline, but it also means any change you make in a form only persists for the current browser session.
To wire a page up to a real API, start with the module that page imports — for example src/data/orders.ts — and replace the exported array with a fetch call inside a server component. See the help center for a walkthrough of the recommended migration path.