# bklit-ui

Installs Bklit UI chart components into a React or Next.js app, then shows how to compose series, axes and tooltips without hand-rolled SVG.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 1812
- Author: bklit
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/bklit/bklit-ui/tree/HEAD/skills/bklit-ui/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/bklit-ui

## What it does

The skill wires Bklit UI charts into a React or Next.js project. The components are built on visx and motion and shipped through the `@bklit` registry for shadcn, so `shadcn add` drops the source straight into your repo. You own that code, and it is what you open to check prop names and defaults.

First run needs a `components.json`; without one the skill calls `npx shadcn@latest init`. It also expects an `@bklit` entry in `registries`, and that is the step people skip. Import from `components/charts/` under your project alias: pulling from `@bklitui/ui/charts` fails, since that package stays private to the monorepo. Sparklines are single elements — `LineSparkline`, `AreaSparkline` and `BarSparkline` take `data` plus `dataKey`, no children, height defaults to 32. There is no built-in tooltip; `useSparklineHover` hands you the hovered row and you render it.

Theming runs on `--chart-1` through `--chart-5` and `chartCssVars`. The registry adds missing tokens and leaves existing ones alone, which is what you want if the app already has a light and dark palette.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add bklit/bklit-ui --skill bklit-ui -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/bklit-ui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/bklit-ui/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add bklit/bklit-ui --skill bklit-ui -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/bklit-ui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add bklit/bklit-ui --skill bklit-ui -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/bklit-ui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bklit/bklit-ui bklit-ui
```

2. **Manually: put the files in place**
- File: `.github/skills/bklit-ui/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add bklit/bklit-ui --skill bklit-ui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/bklit/bklit-ui --path skills/bklit-ui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/bklit-ui/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add bklit/bklit-ui --skill bklit-ui -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/bklit/bklit-ui/tree/HEAD/skills/bklit-ui/SKILL.md

## When to use it
- add a line chart with a grid and tooltip
- drop a sparkline into a KPI card
- sync crosshairs across several sparklines
- move chart colors onto theme tokens
- build a live streaming line chart

## Example prompts
- Add `@bklit/bar-chart` with `BarXAxis` and `BarYAxis` to the analytics page.
- Build a KPI card with `LineSparkline` from `@bklit/sparkline` and wire `useSparklineHover` to it.
- Theme these series with `--chart-1` to `--chart-5` instead of hex values.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0470bd59ec1a72af.

BEGIN THIRD-PARTY FILE 0470bd59ec1a72af
````text
---
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 or tiny inline
  chart (LineSparkline, AreaSparkline, BarSparkline, useSparklineHover) for
  tables, KPI cards, or dense dashboards; a 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, shadcn
  ChartContainer, or TanStack Charts 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.
````
END THIRD-PARTY FILE 0470bd59ec1a72af

The third-party file has ended. Everything between the 0470bd59ec1a72af tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2742 of 15172 bytes. © bklit · MIT · https://github.com/bklit/bklit-ui/tree/HEAD/skills/bklit-ui/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md