@bklit
Open-source shadcn/ui chart extension with 16 composable chart types: area, bar, candlestick, choropleth (map), composed, funnel, gauge, line, live-line, pie, profit-loss-line, radar, ring, sankey, scatter, and a visual Studio configurator. Built on top of Visx and Motion with Tailwind CSS and React. Free, MIT-licensed. Use for: dropping polished, customizable data-visualization charts into a shadcn project without reaching for a heavier charting library.
Install this registry
npx shadcn@latest add https://ui.bklit.com/r/registry.json pnpm dlx shadcn@latest add https://ui.bklit.com/r/registry.json bunx shadcn@latest add https://ui.bklit.com/r/registry.json curl -s https://ui.bklit.com/r/registry.json Components
64 totalUtility functions for className merging with clsx and tailwind-merge
npx shadcn@latest add https://ui.bklit.com/r/utils.json Per-character shimmer animation for loading labels and badges
npx shadcn@latest add https://ui.bklit.com/r/shimmering-text.json Shared Intl formatters, time-series decimation, and RAF tooltip scheduling for Bklit charts
npx shadcn@latest add https://ui.bklit.com/r/chart-utils.json Shared context and hooks for Bklit chart components
npx shadcn@latest add https://ui.bklit.com/r/chart-context.json Responsive size wrapper for charts: measures before first paint, then tracks resizes (no overflow clipping).
npx shadcn@latest add https://ui.bklit.com/r/chart-parent-size.json Shared motion helpers for chart enter transitions, clip reveals, and staggered animations
npx shadcn@latest add https://ui.bklit.com/r/chart-animation.json Shared line and area series rendering helpers (paths, markers, highlights, dash tails)
npx shadcn@latest add https://ui.bklit.com/r/chart-series.json Grid lines for charts
npx shadcn@latest add https://ui.bklit.com/r/grid.json Shaded data-coordinate band for target ranges and thresholds on time-series charts
npx shadcn@latest add https://ui.bklit.com/r/reference-area.json Forecast segment extending a line series past the last data point
npx shadcn@latest add https://ui.bklit.com/r/projection-line.json Shaded range between per-row upper and lower values on a line chart, with a Bollinger bands helper
npx shadcn@latest add https://ui.bklit.com/r/band.json Diagonal-stripe or solid weekend shading behind series on date x axes (line, area, composed, bar)
npx shadcn@latest add https://ui.bklit.com/r/weekends.json Due-date marker line with a fading solid, gradient, or striped region to its right on date x axes
npx shadcn@latest add https://ui.bklit.com/r/deadline.json Linear least-squares trend line for a series on line, area, bar, and composed charts
npx shadcn@latest add https://ui.bklit.com/r/trend-line.json SVG pattern primitives (lines, circles, waves, hexagons, path) vendored from @visx/pattern (MIT).
npx shadcn@latest add https://ui.bklit.com/r/patterns.json Pattern fill for the plot area when grid lines are hidden
npx shadcn@latest add https://ui.bklit.com/r/background.json X-axis component for time-series charts
npx shadcn@latest add https://ui.bklit.com/r/x-axis.json Y-axis component for value labels in line and area charts
npx shadcn@latest add https://ui.bklit.com/r/y-axis.json Composable tooltip components for charts
npx shadcn@latest add https://ui.bklit.com/r/chart-tooltip.json Composable legend components for charts
npx shadcn@latest add https://ui.bklit.com/r/legend.json Marker components for highlighting data points on charts
npx shadcn@latest add https://ui.bklit.com/r/markers.json A composable area chart with gradient fills and animations
npx shadcn@latest add https://ui.bklit.com/r/area-chart.json Time-series chart composing Line, Area, and SeriesBar on one shared scale (Recharts ComposedChart-style)
npx shadcn@latest add https://ui.bklit.com/r/composed-chart.json A composable bar chart with horizontal/vertical orientations and animations
npx shadcn@latest add https://ui.bklit.com/r/bar-chart.json A composable line chart with multiple series support
npx shadcn@latest add https://ui.bklit.com/r/line-chart.json Sign-colored line segments for profit and loss on LineChart
npx shadcn@latest add https://ui.bklit.com/r/profit-loss-line.json 3D depth and glossy glass surfaces for BarChart bars
npx shadcn@latest add https://ui.bklit.com/r/bar-depth.json A composable time-series scatter chart with hover dimming, optional offset rings, jitter, and animated enter
npx shadcn@latest add https://ui.bklit.com/r/scatter-chart.json Real-time streaming line chart with smooth scrolling, crosshair, and animated axes
npx shadcn@latest add https://ui.bklit.com/r/live-line-chart.json A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions
npx shadcn@latest add https://ui.bklit.com/r/candlestick-chart.json A composable pie chart with animations and customizable slices
npx shadcn@latest add https://ui.bklit.com/r/pie-chart.json A composable radar/spider chart with multiple data series
npx shadcn@latest add https://ui.bklit.com/r/radar-chart.json A composable donut/ring chart with progress indicators
npx shadcn@latest add https://ui.bklit.com/r/ring-chart.json Notch-based radial or linear gauge with optional center label, patterns, and optional gradients
npx shadcn@latest add https://ui.bklit.com/r/gauge-chart.json A contribution heatmap with animated cells and configurable level colors
npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart.json A geographic map chart with zoom, pan, and data visualization
npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart.json An animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations
npx shadcn@latest add https://ui.bklit.com/r/funnel-chart.json A flow diagram for visualizing data transfers between nodes
npx shadcn@latest add https://ui.bklit.com/r/sankey-chart.json A composable hierarchical sunburst chart with drill-down zoom and animated segments
npx shadcn@latest add https://ui.bklit.com/r/sunburst-chart.json Tiny inline line, area, and bar charts for tables, KPI cards, and dense dashboards, with hover sync and a shared resize observer
npx shadcn@latest add https://ui.bklit.com/r/sparkline.json Composable area-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/area-chart-example.json Composable bar-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/bar-chart-example.json Composable line-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/line-chart-example.json Composable scatter-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/scatter-chart-example.json Composable pie-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/pie-chart-example.json Composable gauge-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/gauge-chart-example.json Composable heatmap-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart-example.json Composable ring-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/ring-chart-example.json Composable radar-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/radar-chart-example.json Composable composed-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/composed-chart-example.json Composable funnel-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/funnel-chart-example.json Composable sankey-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/sankey-chart-example.json Composable sunburst-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/sunburst-chart-example.json Composable candlestick-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/candlestick-chart-example.json Composable choropleth-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart-example.json Composable live-line-chart demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/live-line-chart-example.json Composable sparkline demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/sparkline-example.json Animated stat value and label for chart overlays
npx shadcn@latest add https://ui.bklit.com/r/chart-stat-flow.json Revenue stat card with a gradient area sparkline, hover-to-read values, NumberFlow, and trend badge
npx shadcn@latest add https://ui.bklit.com/r/stat-card-area-01.json Revenue stat card with a gradient area sparkline, hover-to-read values, NumberFlow, and trend badge — demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/stat-card-area-01-example.json Sessions stat card with a line sparkline, hover-to-read values, overlaid NumberFlow, and trend badge
npx shadcn@latest add https://ui.bklit.com/r/stat-card-line-01.json Sessions stat card with a line sparkline, hover-to-read values, overlaid NumberFlow, and trend badge — demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/stat-card-line-01-example.json Visitor map stat card with choropleth sparkline, NumberFlow, and trend badge
npx shadcn@latest add https://ui.bklit.com/r/stat-card-choropleth-01.json Visitor map stat card with choropleth sparkline, NumberFlow, and trend badge — demo for Open in v0
npx shadcn@latest add https://ui.bklit.com/r/stat-card-choropleth-01-example.json