Library · v0.3.0

Components

Every card is the component itself, rendered live from the same package the dashboard installs. Open one for each example beside its code, the rules for using it and its props.

18
Components
25
Live examples
55
Documented props
Actions

Button

One button family: primary amber for the one main action, outline for the secondary, ghost for tertiary, danger for destructive.

3 examples · 5 props
Layout

Card

The container for everything on a page: a flat surface with a hairline border. Flat tiles nest inside it; glow marks the one highlighted panel.

2 examples · 3 props
Layout

PageHeader

The top of a page: a kicker, a serif title with one italic accent word, a one-line subtitle and the page's actions on the right.

1 example · 4 props
Layout

App shell and sidebar

The signed-in app frame: a fixed sidebar with tree navigation, a main column, and a drawer with a top bar under 768px.

1 example · 4 props
Layout

Tabs

Underline tabs between the sibling pages of one section, such as Overview, Run history and Git snapshots under Analytics.

1 example · 2 props
Data

StatCard

A KPI tile: an uppercase label, a serif number and an optional delta line. StatStrip is the hairline-separated row for a landing hero.

2 examples · 5 props
Data

Table

Data rows with uppercase header cells and hairline rules; under 640px each row collapses into a label/value card when cells carry a data-label.

1 example · 2 props
Data

Pagination

The footer of a paginated table: the range summary, a page-size dropdown and first, previous, numbered, next and last buttons.

1 example · 3 props
Data

Chart helpers

Props for Recharts, or any SVG, that follow the theme: chartColors, chartAxisProps, chartGridProps and chartTooltipStyle.

1 example · 3 props
Forms

Forms

Field wraps a label, a control and one line of hint or error; Input, Textarea, Select, Checkbox and Segmented are the controls.

2 examples · 3 props
Forms

Dropdown

A select with an optional filter box, for page sizes, models and modes; options carry a label, a mono sublabel and a badge.

1 example · 3 props
Feedback

Badge

A status pill with a leading dot and its word, in the fixed status vocabulary; StatusBadge picks the colour from an API status word.

2 examples · 3 props
Feedback

Notice

An inline message with an icon, a bold title, one sentence and an optional action, in success, error, warning, info or neutral.

1 example · 2 props
Feedback

States

EmptyState, ErrorState, LoadingState, Spinner and Skeleton: what a region shows when it has nothing, failed, or is still loading.

2 examples · 4 props
Feedback

Dialog

A modal panel over a scrim for confirmations and short forms: a serif title, an optional description, any body and right-aligned actions.

1 example · 3 props
Marketing

Steps

A numbered vertical list with a connector line, for a landing page's how-it-works section; three or four steps.

1 example · 1 prop