# 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/