shadcn/ui — dashboard navigation and reporting regions
Functional Product UI · product UI flow
Source: pending · Classification: pending
Original principle diagram · Draft explanation
Separate navigation, summary and investigation.
What to borrow: Keep persistent navigation outside the reporting area, with summary metrics above a larger chart.
When to use this principle
- When it works
- Operational dashboards where people alternate between a quick overview and a more detailed report.
- When to avoid it
- Filling the first screen with metrics that have no relationship to the user's next decision.
Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.
- Steal · grid/layoutmodel draft
Inside the dashboard example, a narrow navigation column sits beside a broad report region. Four summary cards share a row, while a larger visitor chart spans the area beneath them.
- Steal · copywritingmodel draft
Each metric combines a value, a change indicator and a short interpretation. Explain the direction of a change in words when the number alone cannot tell the reader why it matters.
- Steal · component patternmodel draft
The chart's period options sit in its own header, separate from the page's example navigation. Place a control near the region it affects so scope is visible before interaction; the screenshot does not verify the data behavior.
Fonts: Geist · Original: shadcn/ui
private-reference-only
View original ↗Source & usage rights
Original: shadcn/ui. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-10-10. Capture does not establish source verification.