---
name: "@bklit"
slug: "bklit"
description: "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."
category: "Charts/data viz"
tags: ["aesthetic", "animation", "backgrounds", "cards", "charts", "dashboard", "loaders", "maps", "overlays"]
framework: "react"
license: "MIT"
author: "bklit"
website: "https://ui.bklit.com"
github: "https://github.com/bklit/bklit-ui"
registry: "https://ui.bklit.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1253
component_count: 56
generated_at: "2026-07-28T08:00:50.948Z"
---

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

## Links

- Website: https://ui.bklit.com
- GitHub: https://github.com/bklit/bklit-ui
- Registry JSON: https://ui.bklit.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/bklit
- This file: https://sh4dcn.vercel.app/md/bklit.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/bklit/bklit-ui.git
# fetch the raw registry index
curl -s https://ui.bklit.com/r/registry.json
```

## Components (56)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | Utility functions for className merging with clsx and tailwind-merge | `npx shadcn@latest add https://ui.bklit.com/r/utils.json` |
| shimmering-text | registry:component | Per-character shimmer animation for loading labels and badges | `npx shadcn@latest add https://ui.bklit.com/r/shimmering-text.json` |
| chart-utils | registry: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 | registry:component | Shared context and hooks for Bklit chart components | `npx shadcn@latest add https://ui.bklit.com/r/chart-context.json` |
| chart-animation | registry: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 | registry: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` |
| grid | registry:component | Grid lines for charts | `npx shadcn@latest add https://ui.bklit.com/r/grid.json` |
| reference-area | registry: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 | registry:component | Forecast segment extending a line series past the last data point | `npx shadcn@latest add https://ui.bklit.com/r/projection-line.json` |
| background | registry: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 | registry:component | X-axis component for time-series charts | `npx shadcn@latest add https://ui.bklit.com/r/x-axis.json` |
| y-axis | registry: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 | registry:component | Composable tooltip components for charts | `npx shadcn@latest add https://ui.bklit.com/r/chart-tooltip.json` |
| legend | registry:component | Composable legend components for charts | `npx shadcn@latest add https://ui.bklit.com/r/legend.json` |
| markers | registry:component | Marker components for highlighting data points on charts | `npx shadcn@latest add https://ui.bklit.com/r/markers.json` |
| area-chart | registry:component | A composable area chart with gradient fills and animations | `npx shadcn@latest add https://ui.bklit.com/r/area-chart.json` |
| composed-chart | registry: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 | registry: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 | registry:component | A composable line chart with multiple series support | `npx shadcn@latest add https://ui.bklit.com/r/line-chart.json` |
| profit-loss-line | registry: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 | registry:component | 3D depth and glossy glass surfaces for BarChart bars | `npx shadcn@latest add https://ui.bklit.com/r/bar-depth.json` |
| scatter-chart | registry: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 | registry: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 | registry: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 | registry:component | A composable pie chart with animations and customizable slices | `npx shadcn@latest add https://ui.bklit.com/r/pie-chart.json` |
| radar-chart | registry:component | A composable radar/spider chart with multiple data series | `npx shadcn@latest add https://ui.bklit.com/r/radar-chart.json` |
| ring-chart | registry:component | A composable donut/ring chart with progress indicators | `npx shadcn@latest add https://ui.bklit.com/r/ring-chart.json` |
| gauge-chart | registry: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 | registry:component | A contribution heatmap with animated cells and configurable level colors | `npx shadcn@latest add https://ui.bklit.com/r/heatmap-chart.json` |
| choropleth-chart | registry: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 | registry: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-chart | registry:component | A flow diagram for visualizing data transfers between nodes | `npx shadcn@latest add https://ui.bklit.com/r/sankey-chart.json` |
| sunburst-chart | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-01 | registry: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-01-example | registry: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-01 | registry: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-01-example | registry: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-01 | registry: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-01-example | registry: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` |

## For AI agents

```text
You are adding components from @bklit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/bklit.md) for the component list.
2. Fetch the machine-readable index: https://ui.bklit.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: bklit).
```