Dashboard States

Four small dashboard building blocks that Yunxin repeated dozens of times without ever extracting: the empty/loading line inside a table, the stat tile row, the page content column, and a section title with a trailing action.

Import

1import { TableState, StatGrid, DashboardPage, SectionRow } from "@yuhuanowo/yunui/patterns";

TableState

The single muted line an empty or loading table shows in place of rows. Yunxin repeats this 39 times in three different spellings. This is deliberately not EmptyState — that is the full-screen icon + title + description + action block; this is the one-line cell inside a table.

StatGrid

The responsive tile row at the top of a dashboard page — two up on phones, columns up from sm.

SectionRow

A section title with a trailing control on the same baseline. Not the page header — that is PageHeader.

DashboardPage

The capped, centered content column with the house rhythm between sections. Distinct from PageLayout, which is the marketing shell with a navbar and footer.

1<DashboardPage>
2  <PageHeader title="Billing" />
3  <StatGrid>{tiles}</StatGrid>
4  <SectionRow title="Invoices" action={<Button size="sm">Export</Button>} />
5  {table}
6</DashboardPage>

Props