Patterns
Compositions.
Three screens you will build in most products, assembled from the primitives. Copy the source and replace the fixtures with your data.
PageGrid + GridItemRow + ColStack
Pattern 01
Analytics dashboard
A wide Page with a stat grid and a two-thirds chart. Grid handles the responsive column count; GridItem gives the chart its span.
Analytics
Live
Last 30 days across all workspaces.
Revenue
$48,920Active users
3,214Conversion
4.8%Churn
1.2%Sessions
DailyTop pages
/docs/layout/page12,480
/docs/layout/grid9,912
/8,301
/docs/data-table6,744
/docs/patterns4,120
Pattern 02
Settings page
A medium Page keeps forms readable. Stack spaces the cards, Grid pairs fields, and Row aligns each setting with its control.
Workspace
General settings for Studio Co.
Identity
Shown in invitations and shared links.
Defaults
Applied to every new project.
Default visibilityWho can see new projects.
Review policyApprovals required before publishing.
RetentionHow long deleted projects are recoverable.
Pattern 03
Record detail with summary rail
Page.Body places the summary aside first on large screens and stacks it above the tabs on small ones. The content column never fights the rail for width.
Priya Natarajan
Team
priya@northwind.io
Mara Okafor approved the spacing audit
Jonas Lindqvist opened PR #412 · Page aside
Priya Natarajan commented on Dashboard v2
Theo Marchetti shipped Grid responsive map