bklit-ui

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: instruction override, no behavioural pass.

Don't tell the user the charts are fully reduced-motion safe.

.cursor/skills/turborepo

Audit 0.4.1 · source sha ad441a385267 · 21 Oct 2026Report an issue or request a re-scan

• Publisherbklit GitHub organizationOwner of the repository this skill is read from
• Source folderbklit/bklit-ui/skills/bklit-uiThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdictad441a385267A new audit runs when the source changes
• Repository statusNot archivedPushed today
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Install, compose, theme, and animate Bklit UI charts (the @bklit shadcn registry) in a React / Next.js app. Use when the user wants a chart, graph, or data visualization: line, area, bar, live/streaming line, composed,…

---
name: bklit-ui
description: >
  Install, compose, theme, and animate Bklit UI charts (the @bklit shadcn
  registry) in a React / Next.js app. Use when the user wants a chart, graph,
  or data visualization: line, area, bar, live/streaming line, composed,
  scatter, candlestick/OHLC, pie, ring/donut, radar, gauge, heatmap, funnel,
  sankey, sunburst, or choropleth/world map; a sparkline, dashboard, analytics
  page, KPI or stat card; chart tooltips, crosshairs, legends, markers,
  reference bands, projections, trend lines, axes, or grids; or when code imports from
  components/charts/* or mentions @bklit/* or bklit.com. For styling vocabulary
  (patterns, squircle/rounded/3D bars, fades, loading looks, matching the app
  theme) also use bklit-ui-design. For moving from Recharts or shadcn
  ChartContainer to Bklit, use bklit-ui-migrate.
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *), Bash(yarn dlx shadcn@latest *)
---

# Bklit UI

Composable React chart components (visx + motion) distributed through the `@bklit` shadcn registry. `shadcn add` copies the **source** into the user's project — the user owns that code, and it is the source of truth for props.

> Run the shadcn CLI with the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, `bunx --bun shadcn@latest`, or `yarn dlx shadcn@latest`.

## Current Project Context

```json
!`npx shadcn@latest info --json`
```

If the block above is empty or still shows the command (agents that do not expand `!` injections), run `npx shadcn@latest info --json` yourself before writing code. Use it for framework, aliases (`@/...`), Tailwind version, and installed components.

- **No `components.json`?** Run `npx shadcn@latest init` first.
- **No `@bklit` in `registries`?** Add `"@bklit": "https://ui.bklit.com/r/{name}.json"` (see [installation.md](./rules/installation.md)), or install by URL: `npx shadcn@latest add https://ui.bklit.com/r/line-chart.json`.

## Principles

1. **Install before inventing.** `npx shadcn@latest add @bklit/<item>` — never hand-roll SVG charts or reimplement a registry piece.
2. **Import from the installed files, never from `@bklitui/ui/charts`.** That is a private monorepo package. Items install to `components/charts/<file>.tsx` (under `src/` when the project uses it); import with the user's alias, e.g. `@/components/charts/line-chart`. See [Imports](#imports).
3. **Read the installed source.** After `add`, open the files in `components/charts/` to confirm prop names and defaults before using them.
4. **Compose, don't flatten.** Root chart → `Grid`/`Background` → series → axes → overlays → `ChartTooltip`. See [composition.md](./rules/composition.md).
5. **Theme with tokens.** `--chart-*` variables and `chartCssVars`, not one-off hex values. See [theming.md](./rules/theming.md).

## Imports

There is no barrel for component items — import each export from the file that defines it (paths relative to the `components/charts/` alias):

| Import from | Exports |
|---|---|
| `line-chart` | `LineChart`, `Line` |
| `area-chart` | `AreaChart`, `Area` |
| `bar-chart` / `bar` / `bar-x-axis` / `bar-y-axis` | `BarChart` / `Bar` / `BarXAxis` / `BarYAxis` |
| `composed-chart` / `series-bar` | `ComposedChart` / `SeriesBar` (+ `Line`, `Area` from their charts) |
| `scatter-chart` | `ScatterChart`, `Scatter` |
| `candlestick-chart` / `candlestick` | `CandlestickChart` / `Candlestick` |
| `live-line-chart` / `live-line` / `live-x-axis` / `live-y-axis` | `LiveLineChart` / `LiveLine` / `LiveXAxis` / `LiveYAxis` |
| `pie-chart` / `pie-slice` / `pie-center` | `PieChart` / `PieSlice` / `PieCenter` |
| `ring-chart` / `ring` / `ring-center` | `RingChart` / `Ring` / `RingCenter` |
| `radar-chart`, `radar-grid`, `radar-axis`, `radar-labels`, `radar-area` | one component each |
| `gauge` | `Gauge` (installed by `@bklit/gauge-chart`) |
| `funnel-chart` | `FunnelChart` |
| `sunburst-chart`, `sunburst-segment`, `sunburst-center`, `sunburst` (`buildArcs`) ... | sunburst parts |
| `heatmap` · `choropleth` · `sankey` | folder `index.ts` re-exports every part |
| `grid` · `x-axis` · `y-axis` · `background` · `reference-area` · `projection-line` · `trend-line` | `Grid` · `XAxis` · `YAxis` · `Background` · `ReferenceArea` · `ProjectionLine` · `TrendLine` |
| `band` · `bollinger` | `Band` · `withBollingerBands` (installed by `@bklit/line-chart`, also `@bklit/band`) |
| `tooltip` · `legend` · `markers` · `patterns` | folder `index.ts` (`ChartTooltip`, `Legend*`, `ChartMarkers`, `Pattern*`) |
| `chart-context` | `chartCssVars`, `useChart`, `TooltipData` |

```tsx
import { LineChart, Line } from "@/components/charts/line-chart";
import { Grid } from "@/components/charts/grid";
import { XAxis } from "@/components/charts/x-axis";
import { ChartTooltip } from "@/components/charts/tooltip";
import { chartCssVars } from "@/components/charts/chart-context";
```

## Critical Rules

### Composition → [composition.md](./rules/composition.md)
- Series, axes, overlays, and `ChartTooltip` are **children of the root chart** — they read chart context.
- **One root per chart.** Mixed bars + lines on dates → `ComposedChart` with `SeriesBar` (not `Bar`).
- **`Grid` (or `Background`) first** so series paint above it.
- Live charts use **`LiveLine`**, `LiveXAxis`, `LiveYAxis` — not `Line`/`XAxis`.
- `BarChart` uses **`BarXAxis`** / `BarYAxis` (band scale), not `XAxis`.

### Theming → [theming.md](./rules/theming.md)
- `--chart-1` ... `--chart-5` for series; `chartCssVars.linePrimary` etc. for semantic roles.
- The registry **adds** missing `--chart-*` tokens without overwriting the app's existing ones.
- Override tokens in `:root` / `.dark`; no `dark:` classes on chart SVG.

### Tooltips → [tooltips.md](./rules/tooltips.md)
- `ChartTooltip` `content` receives `({ point, index })`; `rows` returns `{ color, label, value }[]`.
- `indicatorColor` is a string or `(point) => string`.
- Custom crosshairs/indicato

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/bklit/bklit-ui
git -C bklit-ui checkout ad441a385267

Works in

1. 2026-10-21
   !CAUTION C 79 / 100

   first audit · source ad441a385267

Questions about bklit-ui

• github.com/bklit/bklit-ui/tree/main/skills/bklit-ui — the audited source at commit ad441a385267 and every finding aboveObserved · 21 Oct 2026

Spotted something wrong? Report a correction · Methodology