Proper UI

Dashboard and analytics layouts

Five dashboard layouts on different sidebar styles, from product overview to finance.

5 steps

  1. Dashboard 01
    Step 1

    Dashboard 01

    A simple-sidebar overview with headline metrics and getting-started cards.

    DocsOpen example
    npx @properui/cli@latest add dashboard-01
  2. Dashboard 04
    Step 2

    Dashboard 04

    A dual-tier sidebar with a revenue chart and recent customers.

    DocsOpen example
    npx @properui/cli@latest add dashboard-04
  3. Dashboard 06
    Step 3

    Dashboard 06

    A slim sidebar and a filterable customer table for dense data.

    DocsOpen example
    npx @properui/cli@latest add dashboard-06
  4. Dashboard 17
    Step 4

    Dashboard 17

    A website analytics view with traffic sources and sessions by country.

    DocsOpen example
    npx @properui/cli@latest add dashboard-17
  5. Dashboard 13
    Step 5

    Dashboard 13

    A banking dashboard with balance history and spending breakdown.

    DocsOpen example
    npx @properui/cli@latest add dashboard-13

Install this flow

One command writes every step and the components they compose.

npx @properui/cli@latest add dashboard-01 dashboard-04 dashboard-06 dashboard-17 dashboard-13

Working in an agent? Ask the MCP server for the same journey.

search_flows "Dashboard and analytics layouts"