@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.

56 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.bklit.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.bklit.com/r/registry.json

bun bunx shadcn@latest add https://ui.bklit.com/r/registry.json

fetch registry curl -s https://ui.bklit.com/r/registry.json

Components

56 total

Utilities lib

Utility functions for className merging with clsx and tailwind-merge

npx shadcn@latest add https://ui.bklit.com/r/utils.json

Shimmering Text component

Per-character shimmer animation for loading labels and badges

npx shadcn@latest add https://ui.bklit.com/r/shimmering-text.json

Chart Utilities lib

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

Chart Context component

Shared context and hooks for Bklit chart components

npx shadcn@latest add https://ui.bklit.com/r/chart-context.json

Chart Animation component

Shared motion helpers for chart enter transitions, clip reveals, and staggered animations

npx shadcn@latest add https://ui.bklit.com/r/chart-animation.json

Chart Series Layer component

Shared line and area series rendering helpers (paths, markers, highlights, dash tails)

npx shadcn@latest add https://ui.bklit.com/r/chart-series.json

Chart Grid component

Grid lines for charts

npx shadcn@latest add https://ui.bklit.com/r/grid.json

Reference Area component

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

Projection Line component

Forecast segment extending a line series past the last data point

npx shadcn@latest add https://ui.bklit.com/r/projection-line.json

Chart Background component

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

X-axis component for time-series charts

npx shadcn@latest add https://ui.bklit.com/r/x-axis.json

Y Axis component

Y-axis component for value labels in line and area charts

npx shadcn@latest add https://ui.bklit.com/r/y-axis.json

Chart Tooltip component

Composable tooltip components for charts

npx shadcn@latest add https://ui.bklit.com/r/chart-tooltip.json

Chart Legend component

Composable legend components for charts

npx shadcn@latest add https://ui.bklit.com/r/legend.json

Chart Markers component

Marker components for highlighting data points on charts

npx shadcn@latest add https://ui.bklit.com/r/markers.json

Area Chart component

A composable area chart with gradient fills and animations

npx shadcn@latest add https://ui.bklit.com/r/area-chart.json

Composed Chart component

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

Bar Chart component

A composable bar chart with horizontal/vertical orientations and animations

npx shadcn@latest add https://ui.bklit.com/r/bar-chart.json

Line Chart component

A composable line chart with multiple series support

npx shadcn@latest add https://ui.bklit.com/r/line-chart.json

Profit/Loss Line component

Sign-colored line segments for profit and loss on LineChart

npx shadcn@latest add https://ui.bklit.com/r/profit-loss-line.json

Bar Depth component

3D depth and glossy glass surfaces for BarChart bars

npx shadcn@latest add https://ui.bklit.com/r/bar-depth.json

Scatter Chart component

A composable time-series scatter chart with offset rings, hover dimming, and animated enter

npx shadcn@latest add https://ui.bklit.com/r/scatter-chart.json

Live Line Chart component

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

Candlestick Chart component

A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions

npx shadcn@latest add https://ui.bklit.com/r/candlestick-chart.json

Pie Chart component

A composable pie chart with animations and customizable slices

npx shadcn@latest add https://ui.bklit.com/r/pie-chart.json

Radar Chart component

A composable radar/spider chart with multiple data series

npx shadcn@latest add https://ui.bklit.com/r/radar-chart.json

Ring Chart component

A composable donut/ring chart with progress indicators

npx shadcn@latest add https://ui.bklit.com/r/ring-chart.json

Gauge component

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

Heatmap Chart component

A contribution heatmap with animated cells and configurable level colors

npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart.json

Choropleth Map component

A geographic map chart with zoom, pan, and data visualization

npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart.json

Funnel Chart component

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

Sankey Diagram component

A flow diagram for visualizing data transfers between nodes

npx shadcn@latest add https://ui.bklit.com/r/sankey-chart.json

Sunburst Chart component

A composable hierarchical sunburst chart with drill-down zoom and animated segments

npx shadcn@latest add https://ui.bklit.com/r/sunburst-chart.json

Area Chart Example example

Composable area-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/area-chart-example.json

Bar Chart Example example

Composable bar-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/bar-chart-example.json

Line Chart Example example

Composable line-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/line-chart-example.json

Scatter Chart Example example

Composable scatter-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/scatter-chart-example.json

Pie Chart Example example

Composable pie-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/pie-chart-example.json

Gauge Chart Example example

Composable gauge-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/gauge-chart-example.json

Heatmap Chart Example example

Composable heatmap-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart-example.json

Ring Chart Example example

Composable ring-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/ring-chart-example.json

Radar Chart Example example

Composable radar-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/radar-chart-example.json

Composed Chart Example example

Composable composed-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/composed-chart-example.json

Funnel Chart Example example

Composable funnel-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/funnel-chart-example.json

Sankey Chart Example example

Composable sankey-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/sankey-chart-example.json

Sunburst Chart Example example

Composable sunburst-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/sunburst-chart-example.json

Candlestick Chart Example example

Composable candlestick-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/candlestick-chart-example.json

Choropleth Chart Example example

Composable choropleth-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart-example.json

Live Line Chart Example example

Composable live-line-chart demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/live-line-chart-example.json

Chart Stat Flow component

Animated stat value and label for chart overlays

npx shadcn@latest add https://ui.bklit.com/r/chart-stat-flow.json

Stat Card Area block

Revenue stat card with gradient area sparkline, NumberFlow, and trend badge

npx shadcn@latest add https://ui.bklit.com/r/stat-card-area-01.json

Stat Card Area Example example

Revenue stat card with gradient area sparkline, NumberFlow, and trend badge — demo for Open in v0

npx shadcn@latest add https://ui.bklit.com/r/stat-card-area-01-example.json

Stat Card Line block

Sessions stat card with line sparkline, overlaid NumberFlow, and trend badge

npx shadcn@latest add https://ui.bklit.com/r/stat-card-line-01.json

Stat Card Line Example example

Sessions stat card with line sparkline, 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

Stat Card Choropleth block

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

Stat Card Choropleth Example example

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