MCPcopy Index your code
hub / github.com/bklit/bklit-ui

github.com/bklit/bklit-ui @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
3,214 symbols 8,441 edges 959 files 34 documented · 1% updated 1d ago★ 1,2461 open issues
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

hero

vercel-oss 2

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






<a href="https://github.com/bklit/bklit-ui"><img src="https://www.shieldcn.dev/github/stars/bklit/bklit-ui.svg?variant=secondary&size=xs&theme=zinc" alt="GitHub Stars" /></a>
<a href="https://github.com/bklit/bklit-ui/actions"><img src="https://www.shieldcn.dev/github/ci/bklit/bklit-ui.svg?variant=secondary&size=xs&theme=zinc" alt="CI" /></a>
<a href="https://discord.gg/75s4frfE8X"><img src="https://www.shieldcn.dev/discord/members/75s4frfE8X.svg?variant=secondary&size=xs&theme=zinc" alt="Discord Members" /></a>
<a href="https://x.com/uixmat"><img src="https://www.shieldcn.dev/x/follow/uixmat.svg?variant=branded&size=xs&theme=zinc" alt="X Follow" /></a>
<a href="https://vercel.com/oss"><img src="https://shieldcn.dev/badge/Vercel_OSS_Program_Member.svg?variant=branded&size=xs&theme=zinc&logo=vercel" alt="Vercel OSS Program Member" /></a>

Premium Sponsors

Bklit UI is supported by our premium sponsors.

OpenPanel

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 Area Chart Docs · Studio Bar Chart Bar Chart Docs · Studio Candlestick Chart Candlestick Chart Docs · Studio
Choropleth Chart Choropleth Chart Docs · Studio Composed Chart Composed Chart Docs · Studio Funnel Chart Funnel Chart Docs · Studio
Gauge Gauge Docs · Studio Line Chart Line Chart Docs · Studio Live Line Chart Live Line Chart Docs · Studio
Pie Chart Pie Chart Docs · Studio Radar Chart Radar Chart Docs · Studio Ring Chart Ring Chart Docs · Studio
Scatter Chart Scatter Chart Docs · Studio Sankey Chart 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.

Bklit Studio

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

Alt

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.

Extension points exported contracts — how you extend this code

StudioChartRenderProps (Interface)
Props that may change chart output — compared explicitly for pan isolation.
packages/studio/src/components/studio-chart-render.tsx
StatCardHoverState (Interface)
(no doc)
packages/ui/registry/blocks/stat-card-line-01/components/stat-card-chart.tsx
CatalogTile (Interface)
(no doc)
apps/studio-docs/components/studio-catalog-grid.tsx
Particle (Interface)
(no doc)
apps/web/components/particle-badge.tsx
WebKitGestureEvent (Interface)
WebKit trackpad pinch (Safari, Tauri/WKWebView on macOS).
packages/studio/src/editor/use-editor-canvas-view.ts
StatCardHoverState (Interface)
(no doc)
packages/ui/registry/blocks/stat-card-choropleth-01/components/stat-card-chart.tsx
IconProps (Interface)
(no doc)
apps/studio-docs/components/icons/bklit.tsx
Rgb (Interface)
(no doc)
apps/web/components/particle-badge.tsx

Core symbols most depended-on inside this repo

cn
called by 315
packages/ui/src/lib/utils.ts
cn
called by 201
apps/web/lib/utils.ts
controlGroup
called by 68
packages/studio/src/lib/sidebar-control-templates.ts
isStudioComponentVisible
called by 56
packages/studio/src/lib/studio-component-visibility.ts
defaultStudioState
called by 53
packages/studio/src/lib/studio-parsers.ts
parsePipeField
called by 39
packages/studio/src/lib/studio-series-design.ts
useChartStable
called by 39
packages/ui/src/charts/chart-context.tsx
getEffectiveSeriesColor
called by 38
packages/studio/src/lib/studio-series-design.ts

Shape

Function 2,747
Interface 465
Method 2

Languages

TypeScript100%

Modules by API surface

apps/web/components/charts/chart-examples.tsx92 symbols
packages/ui/src/charts/heatmap/heatmap-utils.ts56 symbols
packages/studio/src/lib/studio-components.ts45 symbols
packages/studio/src/lib/studio-series-line-props.ts42 symbols
packages/studio/src/lib/studio-projection-props.ts39 symbols
packages/studio/src/lib/codegen-helpers.ts39 symbols
packages/ui/src/charts/sunburst.ts38 symbols
packages/studio/src/dev/studio-ui-catalog-sections.tsx38 symbols
packages/studio/src/lib/heatmap-studio-colors.ts34 symbols
packages/studio/src/lib/motion-config.ts31 symbols
packages/studio/src/lib/studio-series-design.ts27 symbols
packages/studio/src/lib/demo-data.ts27 symbols

For agents

$ claude mcp add bklit-ui \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact