| 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 *) |
Bklit UI
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, or bunx --bun shadcn@latest.
Current Project Context
!`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.
Principles
- Install before inventing. Use
npx shadcn@latest add @bklit/<chart> — charts are registry components, not hand-rolled SVG.
- Compose, don't flatten. Root chart →
Grid → series → axes → ChartTooltip. See composition.md.
- Theme with tokens. Use
chartCssVars and --chart-* variables — never hardcode one-off colors. See theming.md.
- Read the doc page first. Each chart has props, data shape, and examples at
https://ui.bklit.com/docs/components/<slug>.
- Browse variants. Gallery:
https://ui.bklit.com/charts/<slug> — Studio: https://ui.bklit.com/studio?chart=<slug>.
Critical Rules
These rules are always enforced. Each links to Incorrect/Correct examples.
- Series and axes live inside the root chart —
LineChart, BarChart, AreaChart, etc.
- One root per chart — use
ComposedChart for mixed series types.
- Grid before series so lines/bars render above grid lines.
ChartTooltip as a chart child — required for crosshair and hover context.
- Use
chartCssVars from @bklitui/ui/charts instead of raw "var(--chart-…)" strings.
- Series palette:
--chart-1 … --chart-5 for multi-series charts.
- Tooltip surfaces:
bg-popover text-popover-foreground — avoids white-on-white in light mode.
- Default duration ~1100ms for cartesian enter animations unless the doc specifies otherwise.
- Replay: change
revealSignature or remount with a new key.
- Live charts: use
paused on LiveLineChart to debug without stopping the rAF loop manually.
- Custom content via
ChartTooltip content prop or children patterns from docs.
indicatorColor function for candlestick / dynamic crosshair colors.- Custom indicators: use
useChart() — do not track mouse globally outside chart context.
- Require
@bklit registry in components.json.
- Install:
npx shadcn@latest add @bklit/<slug>.
- Let the CLI install peer dependencies — do not pin
@visx/* / motion manually unless resolving a conflict.
Chart Catalog
Workflow
- Run
npx shadcn@latest info --json — verify @bklit registry and aliases.
- Pick a chart from the catalog (or ask the user what story the data tells).
- Open the doc URL for data shape and props.
- If not installed:
npx shadcn@latest add @bklit/<slug>.
- Compose with grid, series, axes, tooltip — apply theming tokens.
- Point the user to the gallery or Studio URL for variant inspiration.
Quick Reference
npx shadcn@latest info --json
npx shadcn@latest add @bklit/line-chart
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>
Utility docs
Detailed References
