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 uniquement — React, depuis @krizaka/ui/dashboard-layout. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The home of a signed-in product: figures, what is running, what needs attention.
- A console's overview above its tables.
Quand ne pas l’utiliser
- For one object's page.À la place : Detail layout
- For a list to work through.À la place : Split view
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";Exemples
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 | Défaut | Description |
|---|---|---|---|
titlerequis | 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 | Défaut | Description |
|---|---|---|---|
titlerequis | 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). |
Accessibilité
- Each widget is a
sectionnamed by its title. - The heading is the screen's
h1, or anh2inside an AppShell (headingAs).
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.