Crossed box placeholder for any image or logo.

props: className?, style?

Initials in a circle.

props: name, large?

Wire button. Primary is the filled one.

props: children, variant? (default | primary | link), block?, onClick?

Tab row. Renders nothing with no tabs.

props: tabs, active?

Title, optional subtitle, secondary and primary action.

props: title, subtitle?, primary?, secondary?, onAction?, mobile?

Search box plus one select per filter.

props: filters, mobile?

Static table. Money and numbers align right, status renders as a pill. Becomes cards on mobile.

props: columns, rows, onRow?, mobile?

Static (non-interactive) field, used by settings and the confirm modal.

props: field, index?

One stat: label, value, comparison line.

props: kpi, value

Row of KpiCards with seeded values.

props: kpis, seed

Seeded bar chart in a box.

props: seed, title?, bars?

Label / value grid from columns and one row.

props: columns, row

Path above the title. Last item is current. Renders nothing when empty.

props: items?

DataTable that loads 8 more seeded rows when its end scrolls into view, up to 120. Scroll the page to see it load.

props: seed, columns, onRow?, mobile?, live?

Real inputs with validation from field rules. Errors on blur and on submit; a valid submit fires the primary action.

props: fields, primary?, secondary?, onAction?, columns? (1 | 2), blockButtons?, live?

Grey text lines under an optional title.

props: title?, seed

Note box with an icon, title and text.

props: title?, text?

Row of page actions: Share, Export, then the secondary and primary actions.

props: primary?, secondary?, onAction?

Centered modal box over a dimmed layer. Used by the confirm template.

props: children

Bottom-right toast, shown when a click has nowhere to go.

props: text