Dashboard or admin app: design recipe

DesktopTabletPhone

Full screen New tab ↗

A starter page built from this recipe's tokens: plain HTML and CSS, no build step, code under MIT. Copy it, or let your agent port it to your stack. Demo names and numbers are made up.

Design tokens

Files: tokens.css (CSS variables, light and dark) · tailwind.css (Tailwind v4 @theme) · tokens.json · Google Fonts CSS

Pairings, scales and ratios are AgentGid editors' choices; color values are copied from Radix Colors (MIT).

UI kit and dashboard blocks

Also fits: shadcn/ui, HeroUI, Untitled UI, HyperUI.

Icons

Also fits: Tabler Icons, Bootstrap Icons, Phosphor Icons, Remix Icon.

Fonts

Also fits: Bunny Fonts, Fontshare, Fira Code, IBM Plex.

Color scales for charts and states

Also fits: Colormind, uiGradients, Realtime Colors, ColorBox (Lyft).

Fake data and images

Also fits: Mockaroo.

Logos for integrations

Also fits: SVGL, Brandfetch (Logo API, Brand API), Logo.dev, SVG Logos (gilbarbara/logos, svgporn).

Libraries

Agent Skills for the design work

Before you call it done

• Add credits for every source whose license asks for them (the brief lists each credit line).
• Check accessibility and contrast with axe-core, for example through Playwright, and fix what it reports.
• Run Lighthouse on the built page and check the layout at phone width and on desktop.

Playwright (JavaScript) npm install @playwright/test · axe-core npm install axe-core · Lighthouse npm install lighthouse

The brief

# Design recipe: Dashboard or admin app (AgentGid)

For a data-heavy web app: tables, charts, forms, states. Look: minimal, flat, corporate, outline.
Use these sources; each was checked on its official pages and its license allows commercial use. Follow each source's license line and credit line. Prefer the first pick in each slot.

## Design tokens (AgentGid editors' choice; values from Radix Colors and Google Fonts)
- Fonts: headings Inter 600, body Inter, code JetBrains Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap
- Colors (light): background #fcfcfd, surface #f9f9fb, border #d9d9e0, text #1c2024, muted #60646c, accent #0090ff (hover #0588f0, soft #e6f4fe). Scales: Radix slate + blue; dark values in tokens.json.
- Type scale: 14px base, ratio 1.2: xs 9.5px, sm 11.5px, base 14.0px, lg 17.0px, xl 20.0px, 2xl 24.0px, 3xl 29.0px, 4xl 35.0px, 5xl 42.0px
- Radius 8px (sm 4, lg 12); spacing on a 4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Text on accent buttons: white. Keep body text at least 4.5:1 against its background (WCAG 2.2 AA).
- Starter page built from these tokens (HTML + CSS, MIT): https://agentgid.com/assets/recipes/dashboard/starter/ · tokens: https://agentgid.com/assets/recipes/dashboard/starter/tokens.css, https://agentgid.com/assets/recipes/dashboard/starter/tailwind.css, https://agentgid.com/assets/recipes/dashboard/starter/tokens.json
- Same starter as a Next.js project (App Router, Tailwind CSS v4, lucide-react, next/font; builds with Next 16.4.0, checked 2026-10-21 16:32 UTC): https://agentgid.com/assets/recipes/dashboard/dashboard-next.zip. Unzip, `npm install`, `npm run dev`; AGENTS.md inside is this brief.

## Libraries
- npm install next  # Next.js (MIT)
- npm install tailwindcss  # Tailwind CSS (MIT)
- npm install recharts  # Recharts (MIT)
- npm install @tanstack/react-table  # TanStack Table (MIT)
- npm install react-hook-form  # React Hook Form (MIT)
- npm install zod  # Zod (MIT)

## Content sources
### UI kit and dashboard blocks
- Tremor (UI kits and website templates). Open-source React and Tailwind components for charts and dashboards (copy-paste or @tremor/react), plus blocks and templates at blocks.tremor.so. Price: free; commercial use OK. Style: minimal, corporate, flat.
  Connect: npm @tremor/react.
  Get files: Copy-paste components from tremor.so, or npm i @tremor/react; see the installation guide on tremor.so (html, css).
  Not allowed: Blocks and templates at blocks.tremor.so not checked
  Rule: Keep the Apache-2.0 licence text and any NOTICE if you redistribute the source.
  Rule: Check the licence of blocks and templates at blocks.tremor.so separately.
  License: https://raw.githubusercontent.com/tremorlabs/tremor/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/tremor/)
  Next.js: see https://agentgid.com/assets/tremor/agent.md (official example: https://www.tremor.so/docs/getting-started/installation/next)
- Flowbite (UI kits and website templates). Open-source Tailwind CSS component library (MIT) with copy-paste HTML components, plugin JS and framework guides; a paid Flowbite Pro adds blocks and templates. Price: free tier; commercial use OK; no credit needed. Style: minimal, flat, corporate.
  Connect: official MCP server https://flowbite.com/docs/getting-started/mcp/; npm flowbite.
  Get files: npm install flowbite (Tailwind v4 plugin), or CDN flowbite.min.css and flowbite.min.js from cdn.jsdelivr.net/npm/flowbite; copy component HTML from flowbite.com/docs/components/. Official MCP: npx flowbite-mcp. Repo has llms.txt (html, css).
  Not allowed: MIT covers the open-source library only; Pro is under the EULA
  Not allowed: Docs text is CC BY 3.0 (not the code)
  Rule: Keep the MIT copyright and permission notice in copies of the library code.
  Rule: Flowbite Pro is not MIT; its EULA applies. Do not copy Pro blocks into a site without a Pro licence.
  Rule: The Flowbite name and logos are trademarks of Bergside Inc.
  License: https://flowbite.com/docs/getting-started/license/ (checked 2026-10-21; details: https://agentgid.com/assets/flowbite/)
  Next.js: see https://agentgid.com/assets/flowbite/agent.md (official example: https://flowbite.com/docs/getting-started/next-js/)
- Preline UI (UI kits and website templates). Open-source Tailwind CSS component set (npm package preline) with free components and blocks; a paid Preline Pro adds premium blocks and templates. Price: free tier; commercial use with conditions; credit depends on the item; ship inside your app with conditions. Style: minimal, corporate, flat.
  Connect: npm preline.
  Get files: npm i preline, import the Preline variants file after tailwindcss, add the preline JS before </body>; free blocks are copied from preline.co. Agent skills: npx skills add htmlstreamofficial/preline (html, css).
  Not allowed: Fair Use License: no directly competing product
  Not allowed: Pro: no redistribution, no open-source projects
  Rule: Do not use it to build a product or service that directly competes with Preline UI.
  Rule: Derivative works and redistributions need attribution with a link to the original repository and both licences kept.
  Rule: Pro components are a separate paid licence: no redistribution, no use in open-source projects, themes, UI kits or generators.
  License: https://preline.co/docs/license.html (checked 2026-10-21; details: https://agentgid.com/assets/preline-ui/)
  Tailwind CSS: see https://agentgid.com/assets/preline-ui/agent.md (official example: https://preline.co/docs/index.html)
### Icons
- Lucide (Icons). ISC-licensed icon set (Feather fork) with packages for React, Vue, Svelte, Angular and more. Price: free; commercial use OK; no credit needed. Style: minimal, outline.
  Connect: community MCP server github.com/SeeYangZhi/lucide-icons-mcp; npm lucide-react.
  Get files: npm packages (lucide-react, @lucide/vue, @lucide/svelte, lucide-solid, @lucide/angular, lucide-static, core lucide) or static SVG/sprite/icon font; docs for LLMs at lucide.dev/llms.txt (svg).
  Not allowed: Keep the copyright and permission notice in all copies
  Rule: Keep the copyright and permission notice in all copies.
  License: https://lucide.dev/license (checked 2026-10-10; details: https://agentgid.com/assets/lucide/)
  React: see https://agentgid.com/assets/lucide/agent.md (official example: https://lucide.dev/guide/react/getting-started)
- Heroicons (Icons). MIT-licensed SVG icons from Tailwind Labs with React and Vue packages. Price: free; commercial use OK; no credit needed. Style: outline, filled.
  Connect: npm @heroicons/react.
  Get files: npm install @heroicons/react or @heroicons/vue, or copy the SVG source from heroicons.com (svg).
  Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions
  Rule: Keep the MIT copyright and permission notice in copies.
  License: https://github.com/tailwindlabs/heroicons/blob/master/LICENSE (checked 2026-10-10; details: https://agentgid.com/assets/heroicons/)
  React: see https://agentgid.com/assets/heroicons/agent.md (official example: https://raw.githubusercontent.com/tailwindlabs/heroicons/master/README.md)
### Fonts
- Google Fonts (Fonts). Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. Price: free; commercial use OK; no credit needed; ship inside your app with conditions.
  Connect: official MCP server https://design.googleapis.com/mcp; API docs https://developers.google.com/fonts/docs/developer_api (API key needed). Limits: API key required; quota not stated.
  Get files: Developer API: GET https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY returns a files map of TTF URLs on fonts.gstatic.com (add capability=WOFF2 for woff2). CSS API: https://fonts.googleapis.com/css?family=.. . Whole collection: https://github.com/google/fonts/archive/main.zip (needs no key) (ttf, woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0; each family folder has its own license file.
  Not allowed: OFL fonts cannot be sold by themselves, only bundled with software.
  Not allowed: Modified OFL fonts cannot use the Reserved Font Name.
  Rule: Keep the license file with font files you bundle in an app.
  Rule: Respect Reserved Font Names when you modify a font.
  License: https://github.com/google/fonts (checked 2026-10-10; details: https://agentgid.com/assets/google-fonts/)
  Next.js: see https://agentgid.com/assets/google-fonts/agent.md (official example: https://nextjs.org/docs/app/getting-started/fonts)
- Fontsource (Fonts). Open-source fonts packaged as individual npm packages for self-hosting. Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: npm @fontsource/<font>.
  Get files: npm install @fontsource/<font> (static) or @fontsource-variable/<font>, then import the CSS. CDN: https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}. Metadata API: api.fontsource.org/v1/fonts (woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0.
  Not allowed: API hard limit is 2500 requests per 10 seconds; constant use at that rate can bring a temporary ban.
  Rule: Follow each font's own license (OFL, Apache and others).
  React: see https://agentgid.com/assets/fontsource/agent.md (official example: https://fontsource.org/docs/getting-started/install)
### Color scales for charts and states
- Radix Colors (Color palettes and gradients). Open-source color system: 12-step accessible scales with alpha, dark mode and P3 variants, shipped as CSS/JS via npm. Price: free; commercial use OK; no credit needed.
  Connect: npm @radix-ui/colors.
  Get files: npm install @radix-ui/colors (also yarn/pnpm); CDN files exist for prototyping only; docs: radix-ui.com/colors/docs/overview/installation (css, json).
  Not allowed: Keep the MIT copyright notice
  Not allowed: CDN import not recommended in production by the docs
  Rule: Keep the MIT copyright and permission notice in copies or substantial portions of the software.
  Rule: Keep the MIT copyright and permission notice.
  License: https://github.com/radix-ui/colors/blob/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/radix-colors/)
  HTML/CSS: see https://agentgid.com/assets/radix-colors/agent.md (official example: https://www.radix-ui.com/colors/docs/overview/usage)
- Coolors (Color palettes and gradients). Online palette generator and palette library; build, save and export color palettes. Price: free tier; commercial use OK; no credit needed; no AI training on its content.
  Connect: download from https://coolors.co (no API).
  Get files: Manual: generate a palette at coolors.co, then use Export (copy hex codes, CSS, etc.). No public bulk download (css, json, svg, png).
  Not allowed: No redistribution of palettes stand-alone or as a compilation
  Not allowed: No scraping beyond reasonable use; no AI training
  Rule: Do not redistribute Coolors palettes on a stand-alone basis or as a compilation.
  Rule: Do not bulk download/parse the site or use it to train ML or AI models.
  License: https://coolors.co/terms-of-service (checked 2026-10-21; details: https://agentgid.com/assets/coolors/)
### Fake data and images
- Faker (faker.js) (Placeholder images, data and text). JavaScript library that generates fake but realistic data (names, addresses, text, numbers, images, 70+ locales) in Node and the browser. Price: free; commercial use OK; no credit needed.
  Connect: npm @faker-js/faker.
  Get files: npm install @faker-js/faker --save-dev, then import { faker } from '@faker-js/faker' (json).
  Not allowed: Keep the MIT notice when redistributing the library
  Rule: Keep the MIT copyright notice with copies of the library.
  Rule: Generated data is fake; do not present it as real.
  License: https://raw.githubusercontent.com/faker-js/faker/next/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/faker-js/)
  Node.js: see https://agentgid.com/assets/faker-js/agent.md (official example: https://fakerjs.dev/guide/usage)
- JSONPlaceholder (Placeholder images, data and text). Free fake REST API with 100 posts, 500 comments, 100 albums, 5000 photos, 200 todos and 10 users, for tests and prototypes. Price: free; commercial use OK; shipping inside an app unclear.
  Connect: API docs https://jsonplaceholder.typicode.com/guide/. Limits: No limit stated.
  Get files: GET https://jsonplaceholder.typicode.com/posts, /comments, /albums, /photos, /todos, /users (json).
  Not allowed: No terms stated
  Not allowed: Intended for testing and prototypes
  Rule: Use for docs, tutorials, code examples, prototypes and local tests; it is not a production backend.
  Rule: Writes are faked and not saved.
  License: https://github.com/typicode/jsonplaceholder (checked 2026-10-21; details: https://agentgid.com/assets/jsonplaceholder/)
- Lorem Picsum (Placeholder images, data and text). Free placeholder photo service: random or fixed images at any size via URL (/id, /seed, grayscale, blur, jpg/webp), photos from Unsplash. Price: free; commercial use with conditions; ship inside your app with conditions.
  Connect: API docs https://picsum.photos.
  Get files: Use URLs such as https://picsum.photos/600/400, /id/237/200/300, /seed/<seed>/600/400, add .jpg or .webp; list at /v2/list.
  Not allowed: Unsplash license applies to the photos
  Not allowed: No rate limit stated
  Rule: Intended as placeholder images; picsum.photos itself gives no terms, its photos come from Unsplash (Unsplash license).
  Rule: Do not resell unmodified or rebuild a competing image service from them.
  License: https://unsplash.com/license (checked 2026-10-21; details: https://agentgid.com/assets/lorem-picsum/)
### Logos for integrations
- Devicon (Company and technology logos). Icon set of programming languages and development tools, usable as icon font or SVG files (npm, jsDelivr). Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: npm devicon.
  Get files: npm install devicon, or <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"> for the icon font, or copy SVG files from the GitHub repo (svg, css).
  Not allowed: Follow each brand's own logo policy
  Not allowed: Usage does not imply endorsement
  Rule: Each logo stays the trademark of its owner; follow the company's brand policy.
  Rule: Do not imply endorsement by the brands or Devicon.
  Rule: Keep the MIT copyright notice when redistributing the package.
  Rule: The code is MIT; each logo stays its owner's trademark: use it only to refer to that product, unaltered.
  License: https://github.com/devicons/devicon/blob/master/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/devicon/)

## Agent Skills (optional, read before installing: skills can run scripts)
- npx skills add wshobson/agents --skill kpi-dashboard-design  # kpi-dashboard-design
- npx skills add openclaw/clawhub --skill building-dashboards  # building-dashboards
- npx skills add nexu-io/html-anything --skill dashboard  # dashboard
- npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard  # react-vite-dashboard
- npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts  # lieflat-charts
- npx skills add zebbern/claude-code-guide --skill chart-image  # chart-image

## Before you call it done
- Add a credits section or file for every source whose license asks for credit.
- Check accessibility and contrast with axe-core (e.g. through @playwright/test) and fix what it reports.
- Run Lighthouse on the built page; check the layout at phone width (375px) and desktop.
- npm install @playwright/test  # Playwright (JavaScript)
- npm install axe-core  # axe-core
- npm install lighthouse  # Lighthouse

Recipe page: https://agentgid.com/assets/recipes/dashboard/ · all recipes: https://agentgid.com/assets/recipes/

Other recipes

Minimal SaaS landing page Playful consumer app site SaaS analytics site and app Creative portfolio or agency site Documentation site Everything for web design