Dashboard layout
A dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.
Web only — React, from @krizaka/ui/dashboard-layout. Beta: its API may still change in a minor version.
When to use
- The home of a signed-in product: figures, what is running, what needs attention.
- A console's overview above its tables.
When not to use
- For one object's page.Use instead: Detail layout
- For a list to work through.Use instead: Split view
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";Examples
Orazaka · Eric's console
An accountant's on-premise console: requests, latency, credits, running jobs and packs, the period in a chip group.
Tremblay & associés · on-premise
Good morning, Eric
Nothing left your server this week: 1,284 requests, all answered locally.
Requests
7 days
1,284
+6 %
Answered locally
No cloud call
100 %
sovereign mode
Median answer
Chat
1.8 s
−0.3 s
Credits
Workspace plan
Running now
- Catalogue summariesWriting studio
- Product shots, autumnImage studio
Packs at work
- Customer support412 answers this week
- Law 25 review38 documents checked
The grid
Four widgets of different spans.
Overview
The last 7 days.
Requests
Today
1,284
+6 %
Credits left
Workspace
8,200
Usage
A chart of @krizaka/charts goes here.
Recent jobs
A DataTable goes here.
Props
DashboardLayout
A dashboard screen: heading, actions, filters, then the grid of widgets.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The screen's title: Good morning, Eric. |
actions | ReactNode | — | The screen's actions (a primary Button, a DropdownMenu). |
description | ReactNode | — | One sentence under it. |
eyebrow | ReactNode | — | A mono line above it (the workspace, the date). |
headingAs | "h1" | "h2" | h1 | The heading's level: h1 when the dashboard is the screen, h2 inside an AppShell whose header holds the h1. |
toolbar | ReactNode | — | Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). |
Widget
A widget of the dashboard: a titled region on a card.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The widget's title: it names the region. |
action | ReactNode | — | An action on the right of the title (See all). |
description | ReactNode | — | One line under the title (the period, the source). |
level | 2 | 3 | 2 | The title's level: one under the dashboard's heading — 2 under an h1, 3 inside an AppShell (headingAs="h2"). |
span | 1 | 2 | 3 | "full" | 1 | The columns it takes: 1, 2, 3 or the full row (from sm; one column on a phone). |
Accessibility
- Each widget is a
sectionnamed by its title. - The heading is the screen's
h1, or anh2inside an AppShell (headingAs).
Best practices
- The most important figures first: on a phone they are read first.
- One sentence under the title that says what changed (
Three sales since yesterday). - Charts from @krizaka/charts and tables in
span={2}orfullwidgets; a single figure in a one-column widget.
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Auth layout
An entry screen — sign in, sign up, verify, onboarding: the product's brand panel (its gradient, a promise, a quote) beside a calm form; one column on a phone with the mark above the form.
Detail layout
One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.