---
title: Resources for beautiful SaaS dashboards
slug: saas-dashboards
url: "https://dontmakeitugly.com/collections/saas-dashboards"
resources:
  - tremor
  - origin-ui
  - number-flow
  - geist-design-system
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# Resources for beautiful SaaS dashboards

Charts, tables, dense layouts and the references that show how good products handle them.

Dashboards fail in predictable ways: too many cards, charts with rainbow palettes, tables that don't align. These resources cover the components that get it right and the design systems that have already solved the layout problems.

## Resources, in order

1. [Tremor](https://dontmakeitugly.com/resources/tremor.md) — Copy-paste React components for dashboards and charts.
   Agent: Excellent.
   If you're building anything with numbers in it, start here. The charts have sensible defaults, and the KPI and table components save you from inventing dashboard patterns from scratch.
2. [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md) — Hundreds of polished, practical components built on shadcn/ui conventions.
   Agent: Excellent.
   Quietly one of the most useful component resources around. Less flashy than Magic UI or Aceternity, far more useful for actual product interfaces.
3. [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md) — Animated number transitions that make counters, prices and stats feel expensive.
   Agent: Excellent. Install: `npm install @number-flow/react`
   A tiny detail that makes dashboards, pricing toggles and stat counters feel like a premium product. Use it on numbers that actually change.
4. [Vercel Geist](https://dontmakeitugly.com/resources/geist-design-system.md) — Vercel's design system: the reference for the modern developer-tool look.
   Agent: Good.
   Whether you love the look or think it's overused, you should understand it, because your agent is probably going to reach for it. The colour scale documentation is particularly useful for dark mode.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.