Dashboard Home Shell
The assembled overview, greeting header, KPI strip, recent list, one open chart slot.
The assembled overview, greeting header, KPI strip, recent list, one open chart slot.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Dashboard Home Shell is the assembled product: a 56 wide sidebar with the Acme lockup, five nav items with Projects carrying a 12 badge, and Avery Stone with avery@acme.com at the foot. The content opens with Good morning, Avery, Friday June 13, 3 projects updated since yesterday. Below the greeting sits a four KPI strip: Monthly recurring revenue at $48,210 up 4.1%, Active workspaces at 1,284 up 2.6%, Churn at 1.9% down 0.3pt, and Open tickets at 37 up 9. A two-thirds ruled list shows the three most recently updated projects, Website redesign owned by Maya Chen on track, API v2 migration owned by Jordan Lee in review, and Mobile onboarding owned by Daniel Ross blocked, each with a badge and a relative timestamp. One-third stays dashed for a chart block.
KPIs and recent projects are separate const arrays. The ruled list uses real avatars from ui/avatars and badge variants secondary and outline to differentiate status without status colors.
Reach for this shell as the authenticated landing page, the first thing users see after sign-in. Wire the KPI strip to your metrics endpoint, the recent projects list to the projects query sorted by updated-at, and the dashed slot to a usage chart block.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace overview home. Other assembled dashboard patterns:
Tip: Good morning is not decoration; greeting by name on the home page is the fastest signal that the app knows who you are.