SatoriUI

Dashboard

An overview screen in an app shell: four KPIs with one emphasised, recent invoices with status tints, and plan usage.

Overview

November so far, compared with October.

Revenue

$48,210

Up 12% on October

Customers

1,284

86 joined this month

Churn

1.9%

Down from 2.4%

Open tickets

7

Two waiting over a day

Recent invoices
The latest four, newest first.
CustomerStatusAmount
Kettle & FernNov 4Paid$2,400.00
FieldnoteNov 3Pending$860.00
Harbor & CoOct 28Overdue$1,120.00
Quill StudioOct 26Refunded$240.00
Growth plan
Renews on December 4.
Active
Seats18 / 25
API calls412k / 1M

Need more room? Compare plans

Installation

  1. 1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.

  2. 2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.

    npx shadcn@latest add @satoriui/dashboard-01

  3. 3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

    app/page.tsx
    import { Dashboard01 } from "@/components/satori-ui/blocks/dashboard-01";
    export default function Page() {
      return <Dashboard01 />;
    }

How it adapts

It is built from shadcn/ui primitives, Avatar, Badge, Button, Card, Input, Progress and Table, which every design system re-skins.

For what shadcn has no name for, it uses 16 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-shell
The app frame
ds-shell-sidebar
The sidebar
ds-shell-topbar
The top bar
ds-shell-panel
The content panel
ds-nav-item
Navigation rows
ds-mark
The logo square
ds-title
The title
ds-subtitle
The subtitle
ds-stat
KPI numbers
ds-label
Data labels
ds-meta
Small values
ds-text
Body copy
ds-small
Secondary copy
ds-tile
Surfaces it draws itself
ds-tile-emphasis
The one emphasised surface
ds-link
Links

The same ds-stat is a 32px bold system-font number in Cueit (SF Pro on Apple devices) and a smaller, medium-weight Instrument Sans one in Skita.

The same ds-shell-panel sits flat on Cueit's canvas and is an inset, ringed sheet in Skita.

Next blockData table