Design Atlas

← Atlas

Data viz ​

Chart components, dashboard building blocks and small data displays (spark charts, bar lists, status strips) for analytics screens, reports and marketing pages. Animated numbers and counters live under Motion; map components live under Components.

Start here ​

  • Evil Charts — designed, animated shadcn charts with the same API on Recharts or ECharts, plus llms.txt, a skill and an MCP server for agents.
  • Tremor — the dashboard side: KPI cards, spark charts, bar lists, trackers and filter inputs that already match, and 300+ free blocks.

All sources ​

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • 100,000 StarsInteractive Chrome Experiment that turns nearby stellar data into a navigable, cinematic star map.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • ArcReact components and interactive blocks with motion and live examples.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • beUIMIT motion components, agent UI and charts with llms.txt, JSON API, agent skill and hosted MCP; paid Pro adds blocks and templates.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, registry, api, skillReviewed
  • CodePenPublic interactive Pens and monthly challenges make it easy to study small web experiments, motion and interface details.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • Data Viz ProjectA visual index of chart forms with small examples and filters for comparing shape, purpose and input before choosing a display.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Evil ChartsAnimated shadcn chart components on Recharts or ECharts, with llms.txt, a skill and an MCP server.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txt, registry, skillReviewed
  • FlourishAn interactive data storytelling editor and gallery of working charts, maps and stories to study or adapt.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Internet ArtifactsNeal.fun's interactive timeline of early internet objects, built as a playful illustrated archive.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Keel WorkspaceA polished CRM workspace demo with dense pipeline metrics, source-backed agent decisions and keyboard-first review controls.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • microchartsMIT React charts sized for sentences, tables and KPI cards, with a catalog and seven live example apps.Verdict UsefulShip licence, open source permissiveAgent channels mcp, llms-txtReviewed
  • MLX.fastLive MLX optimization challenge with a paired performance chart, model filters and a detailed contribution leaderboard.Verdict UsefulConditional licence, proprietary freeAgent channels cliReviewed
  • Nex UIAbout 100 shadcn-style React and Tailwind components including 23 charts; MIT claimed without a LICENSE file and the CLI registry is empty.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • SpheriumA WebGL globe editor for styling world maps as dot fields and exporting the result as SVG.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • The PuddingVisual essays that turn data and reported stories into distinctive, interactive editorial experiences.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • TremorCopy-paste React and Tailwind dashboard components, spark charts and 300+ free blocks, now owned by Vercel.Verdict Very usefulShip licence, open source permissiveAgent channels noneReviewed

Patterns worth reusing ​

  • Keep each series' label, light and dark colours and icon in one config object, compiled to CSS variables, so switching theme is a class change rather than a re-render (Evil Charts).
  • Build charts from composable parts (grid, axes, legend, tooltip, extra series) instead of one component with a long list of props, and keep that API stable so a visual style can change without relearning charts (Evil Charts, Dither Kit).
  • Tell series apart with texture (hatching, dots, stripes) as well as colour, so a chart still reads in greyscale and for colour-blind viewers (Evil Charts, Dither Kit).
  • Pair every headline number with a small trend view, such as a spark chart or a delta badge, instead of a full chart (Tremor).
  • Use a single category bar to show proportions of a total, and a strip of coloured cells for status history such as uptime (Tremor).
  • Put a real filter bar (date range plus facets) above the charts it controls (Tremor).
  • Show a loading state inside the chart frame instead of an empty box (Evil Charts).
  • Choose the rendering engine per chart: SVG for small, styled charts, Canvas for long time series and frequent live updates (Evil Charts).

Pitfalls ​

  • Copy-paste charts become your code: upstream fixes have to be merged by hand (Evil Charts). A CLI with a lockfile and a diff command helps (Dither Kit).
  • Entrance animations cost bundle weight: every Evil Charts chart pulls in Motion on top of Recharts or ECharts, and Dither Kit's shared engine brings Motion and two d3 modules.
  • Canvas-drawn charts give screen readers nothing by default; add a text summary or a data table next to each one (Dither Kit).
  • Agent resources can lag the docs: Evil Charts' llms.txt and skill describe only the Recharts versions, although ECharts versions exist. Tell the agent which engine you want.
  • Two generations of one library confuse agents: Tremor's legacy @tremor/react package and its copy-paste components have different APIs, and models know the old one well, so name the version.
  • Fixed palettes need edits before brand colours fit (Dither Kit's seven named hues).
  • Young, single-maintainer projects change fast, and a slowed one can stall: Tremor's main repository had no code changes after April 2025 at review.