shadercn
Beautiful WebGPU/WGSL shader components for React, built on vgpu and TypeGPU and distributed via shadcn.
WebsiteWorkflowsWebFree
4.5Visit
Website
microcharts
Word-sized charts for React.
Day 43 since launch · Launched 25 August 2026
Made by Shushant LakhyaniKnow about Shushant Lakhyani hereGet all my visual guides hereSee what I can build for youAI+Tech+No-Code+Online Business Mini GuidesJoin the newsletter
Made by Shushant LakhyaniKnow about Shushant Lakhyani hereGet all my visual guides hereSee what I can build for youAI+Tech+No-Code+Online Business Mini GuidesJoin the newsletterBuilt with love by Shushant Lakhyani. Building bestproductivityresources.com
Screenshot or bookmark this page so you find it later, then share it with your network.
What is microcharts?
microcharts is a set of tiny, word-sized React charts — sparklines, micro bars and inline SVG trend lines that sit inside a sentence, table cell, KPI card or AI reply. It ships with zero runtime dependencies, weighs roughly 2–7 kB interactive and 1–4 kB static per chart, and is accessible and RSC-safe by default.
Pros
- Tiny bundle size — 1–4 kB static per chart
- Zero runtime dependencies for static charts
- Accessible and RSC-safe out of the box
- Easy to drop into tables, cards and AI replies
Cons
- React-only; not usable in Vue, Svelte or vanilla projects
- Specialised scope — only sparkline-style micro charts
Who should use microcharts
React developers, dashboard builders and designers who need lightweight, inline charts without pulling in a heavy charting library.
Who may not need it
Teams building complex analytical dashboards with tooltips, legends and deep interactivity may still prefer a full charting library.
microcharts alternatives
Similar resources to microcharts, picked from the directory.
Keyline Icons
1,114 free MIT-licensed icons for shadcn/ui, in four styles.
WebsiteWorkflowsWebFree
4.6Visit
Storybook
Frontend workshop for building UI components and pages in isolation.
FrameworkWorkflowsWebFree
4.7Visit
Astryx Design System
An open-source design system that is fully customizable and agent ready.
FrameworkWorkflowsWebFree
4.6Visit
pdfcn
Beautiful PDF components for React, 100% free with zero config and one-command setup.
FrameworkWorkflowsWeb, Cross-PlatformFree
4.4Visit
Libraries.dev
High-crafted UI effect libraries for AI agents and modern apps.
WebsiteWorkflowsWebFreemium
4.8Visit
Free alternatives to microcharts
Free resources that cover similar ground.
Circle
Linear-inspired project management UI built with Next.js and shadcn/ui.
WebsiteProject ManagementWebFree
4.7Visit
ServerKit
A lightweight, open-source server control panel for deploying and managing web apps, databases and containers on your own VPS.
WebsiteWorkflowsWeb, LinuxFree
4.7Visit
Portracker
Real-time port monitoring for your own servers.
Web AppWorkflowsWeb, LinuxFree
4.6Visit
Pafolios
Curated gallery of 800+ design portfolios and case studies from around the world.
WebsitePersonal ProductivityWebFree
4.7Visit
React Bits
Animated UI components for React.
FrameworkWorkflowsWebFree
4.7Visit
Coded Visuals
Animated visual compositions for React and shadcn/ui marketing and landing pages.
FrameworkWorkflowsWebFree
4.6Visit
Featured on Best Productivity Resources
Made microcharts? Add this free badge to your website or README. It links to this page.
<a href="https://bestproductivityresources.com/resources/microcharts" target="_blank" rel="noopener"><img src="https://bestproductivityresources.com/badges/featured-light.svg" alt="Featured on Best Productivity Resources" width="250" height="54" /></a>