Bklit — 3 React Components, Preview & Copy

Also in the Bklit registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Chart Background

background

Pattern fill for the plot area when grid lines are hidden

@visx/pattern@4.0.1-alpha.0, motion3 files

Docs ↗

Bar Depth

bar-depth

3D depth and glossy glass surfaces for BarChart bars

motion1 file

Candlestick Chart

candlestick-chart

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

@visx/scale@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, d3-array, motion4 files1 example

Docs ↗

Chart Animation

chart-animation

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

motion7 files

Chart Context

chart-context

Shared context and hooks for Bklit chart components

@visx/event@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, @visx/scale@4.0.1-alpha.0, d3-array12 files

Chart Series Layer

chart-series

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

@visx/shape@4.0.1-alpha.0, d3-shape, motion15 files

Chart Stat Flow

chart-stat-flow

Animated stat value and label for chart overlays

@number-flow/react, motion1 file

Chart Tooltip

chart-tooltip

Composable tooltip components for charts

@number-flow/react, motion9 files

Choropleth Map

choropleth-chart

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

@types/geojson, @visx/geo@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, @visx/zoom@4.0.1-alpha.07 files2 examples

Docs ↗

Composed Chart

composed-chart

Time-series chart composing Line, Area, and SeriesBar on one shared scale (Recharts ComposedChart-style)

@visx/curve@4.0.1-alpha.0, @visx/scale@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.08 files1 example

Docs ↗

Gauge

gauge-chart

Notch-based radial or linear gauge with optional center label, patterns, and optional gradients

@visx/responsive@4.0.1-alpha.0, @visx/pattern@4.0.1-alpha.0, @number-flow/react, motion8 files1 example

Docs ↗

Chart Grid

grid

Grid lines for charts

@visx/grid@4.0.1-alpha.02 files

Docs ↗

Heatmap Chart

heatmap-chart

A contribution heatmap with animated cells and configurable level colors

@visx/group@4.0.1-alpha.0, @visx/heatmap@4.0.1-alpha.0, @visx/pattern@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.022 files1 example

Docs ↗

Chart Legend

legend

Composable legend components for charts

@base-ui/react, @number-flow/react8 files

Docs ↗

Line Chart

line-chart

A composable line chart with multiple series support

@visx/curve@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.0, motion16 files2 examples

Docs ↗

Live Line Chart

live-line-chart

Real-time streaming line chart with smooth scrolling, crosshair, and animated axes

@visx/curve@4.0.1-alpha.0, @visx/scale@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.05 files1 example

Docs ↗

Chart Markers

markers

Marker components for highlighting data points on charts

utils3 files

Pie Chart

pie-chart

A composable pie chart with animations and customizable slices

@number-flow/react, @visx/group@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.07 files1 example

Docs ↗

Profit/Loss Line

profit-loss-line

Sign-colored line segments for profit and loss on LineChart

@visx/curve@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.04 files

Docs ↗

Projection Line

projection-line

Forecast segment extending a line series past the last data point

@visx/shape@4.0.1-alpha.0, motion4 files

Docs ↗

Radar Chart

radar-chart

A composable radar/spider chart with multiple data series

@visx/group@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, @visx/scale@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.06 files1 example

Docs ↗

Reference Area

reference-area

Shaded data-coordinate band for target ranges and thresholds on time-series charts

motion3 files

Docs ↗

Ring Chart

ring-chart

A composable donut/ring chart with progress indicators

@visx/group@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.0, @visx/shape@4.0.1-alpha.0, @number-flow/react6 files1 example

Docs ↗

Sankey Diagram

sankey-chart

A flow diagram for visualizing data transfers between nodes

@visx/event@4.0.1-alpha.0, @visx/gradient@4.0.1-alpha.0, @visx/pattern@4.0.1-alpha.0, @visx/responsive@4.0.1-alpha.06 files1 example

Docs ↗

Scatter Chart

scatter-chart

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

d3-array, d3-scale, motion, react-use-measure11 files1 example

Docs ↗

Shimmering Text

shimmering-text

Per-character shimmer animation for loading labels and badges

motion1 file

Sunburst Chart

sunburst-chart

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

motion9 files1 example

X Axis

x-axis

X-axis component for time-series charts

utils1 file

Docs ↗

Y Axis

y-axis

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

utils2 files

Docs ↗

From the Bklit readme

A collection of Open Source charts and utility components that you can customize and extend.

Premium Sponsors

Bklit UI is supported by our premium sponsors.

OpenPanel — OpenPanel is an open source analytics platform that combines web analytics and product analytics in one privacy-first tool. Track pageviews, events, funnels, retention, and user journeys — all without cookies.

Charts

  Area Chart
  Docs · Studio


  
    
  
  
  Bar Chart
  Docs · Studio


  
    
  
  
  Candlestick Chart
  Docs · Studio




  
    
  
  
  Choropleth Chart
  Docs · Studio


  
    
  
  
  Composed Chart
  Docs · Studio


  
    
  
  
  Funnel Chart
  Docs · Studio




  
    
  
  
  Gauge
  Docs · Studio


  
    
  
  
  Line Chart
  Docs · Studio


  
    
  
  
  Live Line Chart
  Docs · Studio




  
    
  
  
  Pie Chart
  Docs · Studio


  
    
  
  
  Radar Chart
  Docs · Studio


  
    
  
  
  Ring Chart
  Docs · Studio




  
    
  
  
  Scatter Chart
  Docs · Studio


  
    
  
  
  Sankey Chart
  Docs · Studio

Studio

Studio is Bklit's interactive chart playground. Pick a chart, tweak styling and animation controls in real time, then copy the generated React code or export a registry JSON for your project.

Open Studio →

Getting Started

Bklit UI is a shadcn registry. Initialize shadcn in your project, then add a chart:

npx shadcn@latest init
npx shadcn@latest add @bklit/line-chart

See Installation for registry setup and all components.

Repo activity

License

Chart components (packages/ui, shadcn registry) are MIT licensed.

Bklit Studio (packages/studio, hosted at ui.bklit.com/studio) is proprietary. See LICENSE-STUDIO.md. You may not reuse, resell, or redistribute Studio without written permission.

Bklit contents

Funnel Chart

Funnel Chart

Funnel Chart

Funnel Chart

Funnel Chart

Funnel Chart

Funnel Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Bar Chart

Area Chart

Area Chart

Area Chart

Area Chart

Area Chart

Area Chart

Area Chart

About Bklit

Also in the Bklit registry

Chart Background

Bar Depth

Candlestick Chart

Chart Animation

Chart Context

Chart Series Layer

Chart Stat Flow

Chart Tooltip

Choropleth Map

Composed Chart

Gauge

Chart Grid

Heatmap Chart

Chart Legend

Line Chart

Live Line Chart

Chart Markers

Pie Chart

Profit/Loss Line

Projection Line

Radar Chart

Reference Area

Ring Chart

Sankey Diagram

Scatter Chart

Shimmering Text

Sunburst Chart

X Axis

Y Axis

From the Bklit readme

Premium Sponsors

Charts

Studio

Getting Started

Repo activity

License

What Bklit builds on

Registries like Bklit

Related libraries

About Bklit

All 3 Bklit components