// Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks.
bklit-ui monorepo contributors only — ship a chart or component from playground prototype to production in packages/ui with docs and registry.
bklit-ui monorepo contributors only. Use automatically when building a new chart, editing an existing chart, prototyping chart props or animation, or working on apps/web/app/playground/. Scaffolds the editor playground with left motion pane, right controls pane, and center chart frame.
Guardrails for adding unit tests in bklit-ui without over-testing. Use when the user mentions unit test, unit tests, tests, test coverage, add tests, write tests, vitest, jest, or asks whether something should be tested.
Open a pull request the bklit-ui way: stage and commit with pre-commit hooks, run ultracite from the repo root, run a production test build, fix failures, push, and create a PR with a structured summary. Use when the user asks to commit, push, open a PR, "ship it", or run the full pre-PR checklist.
Add X (Twitter) testimonials to the bklit homepage. Fetches username, avatar, and tweet text from a status URL and appends an entry to apps/web/lib/testimonials.ts. Use when the user shares an x.com/twitter.com tweet URL to add or replace a testimonial.
Generates llms.txt and llms-full.txt files for LLM-friendly project documentation following the llms.txt specification. Use when the user wants to create LLM-readable summaries, llms.txt files, or make their wiki accessible to language models.
| name | bklit-ui |
| description | Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks. |
| allowed-tools | Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) |
Composable chart components for React, distributed via the @bklit shadcn registry. Charts are installed as source into the user's project.
IMPORTANT: Run shadcn CLI commands with the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest.
!`npx shadcn@latest info --json`
Use the JSON above for framework, aliases, Tailwind version, installed components, and resolved paths. Confirm the @bklit registry is configured before adding charts.
npx shadcn@latest add @bklit/<chart> — charts are registry components, not hand-rolled SVG.Grid → series → axes → ChartTooltip. See composition.md.chartCssVars and --chart-* variables — never hardcode one-off colors. See theming.md.https://ui.bklit.com/docs/components/<slug>.https://ui.bklit.com/charts/<slug> — Studio: https://ui.bklit.com/studio?chart=<slug>.These rules are always enforced. Each links to Incorrect/Correct examples.
LineChart, BarChart, AreaChart, etc.ComposedChart for mixed series types.ChartTooltip as a chart child — required for crosshair and hover context.chartCssVars from @bklitui/ui/charts instead of raw "var(--chart-…)" strings.--chart-1 … --chart-5 for multi-series charts.bg-popover text-popover-foreground — avoids white-on-white in light mode.revealSignature or remount with a new key.paused on LiveLineChart to debug without stopping the rAF loop manually.ChartTooltip content prop or children patterns from docs.indicatorColor function for candlestick / dynamic crosshair colors.useChart() — do not track mouse globally outside chart context.@bklit registry in components.json.npx shadcn@latest add @bklit/<slug>.@visx/* / motion manually unless resolving a conflict.| Slug | Use when | Install | Docs | Gallery |
|---|---|---|---|---|
area-chart | Trends with filled regions under lines | @bklit/area-chart | /docs/components/area-chart | /charts/area-chart |
bar-chart | Category comparisons, stacked or grouped bars | @bklit/bar-chart | /docs/components/bar-chart | /charts/bar-chart |
line-chart | Time series, multi-line trends, markers | @bklit/line-chart | /docs/components/line-chart | /charts/line-chart |
live-line-chart | Streaming / real-time data | @bklit/live-line-chart | /docs/components/live-line-chart | /charts/live-line-chart |
composed-chart | Mixed bar + line (or similar) on one axis | @bklit/composed-chart | /docs/components/composed-chart | /charts/composed-chart |
scatter-chart | Correlation, distribution, bubble sizing | @bklit/scatter-chart | /docs/components/scatter-chart | /charts/scatter-chart |
candlestick-chart | OHLC financial data, brushes | @bklit/candlestick-chart | /docs/components/candlestick-chart | /charts/candlestick-chart |
pie-chart | Part-to-whole slices | @bklit/pie-chart | /docs/components/pie-chart | /charts/pie-chart |
ring-chart | Donut / ring KPIs | @bklit/ring-chart | /docs/components/ring-chart | /charts/ring-chart |
radar-chart | Multi-axis comparison | @bklit/radar-chart | /docs/components/radar-chart | /charts/radar-chart |
gauge-chart | Single-value KPI dial | @bklit/gauge-chart | /docs/components/gauge-chart | /charts/gauge-chart |
funnel-chart | Stage conversion funnels | @bklit/funnel-chart | /docs/components/funnel-chart | /charts/funnel-chart |
sankey-chart | Flow between nodes | @bklit/sankey-chart | /docs/components/sankey-chart | /charts/sankey-chart |
choropleth-chart | Geo regions colored by value | @bklit/choropleth-chart | /docs/components/choropleth-chart | /charts/choropleth-chart |
npx shadcn@latest info --json — verify @bklit registry and aliases.npx shadcn@latest add @bklit/<slug>.# Project info
npx shadcn@latest info --json
# Add a chart
npx shadcn@latest add @bklit/line-chart
# Search registries (if configured)
npx shadcn@latest search @bklit
import { LineChart, Line, Grid, XAxis, ChartTooltip, chartCssVars } from "@bklitui/ui/charts";
<LineChart data={data} xDataKey="date">
<Grid horizontal />
<Line dataKey="users" stroke={chartCssVars.linePrimary} />
<XAxis />
<ChartTooltip />
</LineChart>