Dashboard
仪表盘
Aliases:后台管理首页仪表盘后台首页数据看板管理面板首页数据大盘admin 后台
What is it
An admin home screen that concentrates key data and entry points into one view, organized as regional grids: header and sidebar handle navigation, while KPI cards, charts and a primary table fill the content area so users grasp system status at a glance and drill down directly. It anchors the information architecture of the product.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Admin systems needing at-a-glance key metrics
- Users check status first, then drill into details
- Mixed data forms — numbers, charts, tables — on one screen
✕ When not to use
- Public marketing pages — a landing page fits better
- Single-action tools with no data to show
- Mobile-first flows — degrade metrics to lists or card feeds
Variants
Sidebar Dashboard
侧栏仪表盘
Left sidebar + content, the classic SaaS admin layout
Top Navigation Dashboard
顶部导航仪表盘
Nav lives in the header — wider content area
Dense Dashboard
高密度仪表盘
More metrics and denser tables for power operators
Card Dashboard
卡片仪表盘
Fully card-based bento layout
Analytical Dashboard
分析型仪表盘
Chart-led, with tables and filters as support
Page structure
- 01
Top bar
Brand, global search, notifications and account menu — fixed while content scrolls.
- 02
Side nav
Grouped primary navigation, collapsible; becomes a drawer on mobile.
- 03
KPI cards
Three to five core metrics with value and trend, in the top row.
- 04
Charts
One primary and one secondary chart sharing a single time-range control.
- 05
Primary table
Sortable, paginated, with row actions and switchable density.
- 06
Filter bar
Time range and dimension filters applied to the whole page.
Implementation
gridflexgapgrid-template-columns: repeat(auto-fit, minmax(240px, 1fr))Flex skeleton: header on top, below it sidebar + content; inside content use CSS Grid to layer KPI cards, charts and the table. Cards adapt with repeat(auto-fit, minmax(180px, 1fr)); keep chart heights fixed to avoid shift. Use skeletons while data loads; keep filters sticky above the table or at the top of the sidebar.
Related concepts
A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsContainsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsContainsA panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
ComponentsContainsGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsUses pattern