Dashboard Shell

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• App name

  appName · string

  Product name in the rail. Its first letter becomes the drawn logo mark, so pick a real word.

  now: Northwind

• Page title

  pageTitle · string

  Page heading above the card grid. One or two words, like a real product screen.

  now: Overview

• Page subtitle

  pageSubtitle · string

  One muted line under the heading. Omit for a tighter header.

  now: Revenue, activation and retention across every workspace

• Search placeholder

  searchPlaceholder · string

  Placeholder inside the top-bar search field. Keep it plausible. It sells the mockup.

  now: Search metrics, cohorts, events

• User name

  userName · string

  Signed-in user. Only their initials are drawn, on a bordered avatar circle.

  now: Amara Okonkwo

• Nav items

  navItems · array

  Rail rows, top to bottom. Five to eight rows fills a 16:9 rail without crowding it.

  now: 6 items

• Active nav

  activeNav · number

  Index of the selected row. It gets the recessed pill and an accent glyph.

  now: 0

• Rail footer

  railFooter · string

  Status line pinned to the foot of the rail, in mono caps behind a small accent dot, an environment or version, e.g. 'Production · v2.4'. Omit to leave the rail bottom empty.

  now: Production · v2.4

• Range label

  rangeLabel · string

  Text of the date-range control at the right of the page header.

  now: Last 30 days

• Charts

  charts · array

  Exactly two sparkline cards: the first fills the wide top-left slot and draws in the accent colour, the second the narrow bottom-right slot in the secondary accent.

  now: 2 items

• Stat

  stat · object

  The stat card: one large counting figure, a delta chip and a footnote.

  now: object

• Table

  table · object

  The activity table: a label, a head rule and hairline-separated rows.

  now: object

• Shadow

  shadow · boolean

  Float the window off the canvas with a soft shadow. Turn it off for a flat, printed look.

  now: true

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate