Bklit UI skill
Three skills for Bklit UI charts in React: installing from the shadcn registry, styling to the app theme and moving off Recharts.
- 1,899 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill runs `npx shadcn@latest`, copies source into the project, and migration rewrites existing charts.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/bklit-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs `npx shadcn@latest`, copies source into the project, and migration rewrites existing charts.
This is third-party code. Review the repository files before installing.
What it does
Bklit UI is a set of d3 and motion chart components installed from the `@bklit` shadcn registry as source code. The `skills/` folder of the repository holds three agent skills. `bklit-ui` installs and composes charts in a React or Next.js project: line, area, bar, candlestick, pie, radar, funnel, heatmap, sankey and region maps, plus sparklines for tables and KPI cards. The agent first reads project settings with `npx shadcn@latest info --json` and imports components from its own folder rather than from the monorepo package. `bklit-ui-design` turns requests like "bars with a glass effect" into ready variants. `bklit-ui-migrate` finds Recharts or TanStack Charts charts, sorts them into ones ready to port and ones to review, and rewrites them.
Who it is for. Frontend developers of dashboards on React and shadcn/ui who need charts that match the app style or a move off Recharts.
Good fit when
- An analytics page needs a line or area chart with a tooltip and legend in the app style.
- A table or KPI card needs a sparkline, and the component must read the theme colours.
- Recharts charts must be replaced with Bklit without losing data, colours and labels.
- A designer asks for hatching or rounded and glass-like bars and the agent has to pick a ready recipe.
Not a fit when
- The project is not React: the components install through the shadcn registry and consist of React code.
- Recharts charts are fine and a second chart library as an extra dependency is unwanted.
- A diagram is drawn as one image for a report and interactivity is not needed.
Example request
Replace the Recharts charts on the statistics page with Bklit components and keep the theme colours.Limitations
The repository README says nothing about the skills or how to install them, so the `bklit-ui`, `bklit-ui-design` and `bklit-ui-migrate` folders are taken from `skills/` by hand. The components need a project initialised with `npx shadcn@latest init` and the `@bklit` registry entry. The `bklit-ui` skill runs `npx shadcn@latest` through the commands allowed in its description and puts source into `components/charts/`. The `.agents/skills` folder alongside holds skills for developing the repository itself, which are not meant for other projects.
How to disable. Delete the three skill folders from the agent skills directory. Installed charts sit in the project's `components/charts/` and are removed by hand together with the `@bklit` registry entry.
FAQ
How do I install a Bklit UI chart?
Run `npx shadcn@latest init`, then `npx shadcn@latest add @bklit/line-chart`. The source lands in `components/charts/`; import it through your own alias, for example `@/components/charts/line-chart`.
How do the skills differ from each other?
`bklit-ui` installs and composes charts, `bklit-ui-design` picks a look from a plain-language description and `bklit-ui-migrate` ports a project off Recharts or TanStack Charts. All three sit in the `skills/` folder.
Which chart types exist?
Line, area, bar, candlestick, pie, ring, radar, funnel, sankey, heatmap and region maps. Sparklines are added for tables and cards.
How do I match the theme colours?
Use the `--chart-1` through `--chart-5` variables for series and `chartCssVars` for semantic roles. The skill advises against one-off hex values in code.
Can I import from @bklitui/ui/charts?
No. It is a private monorepo package; import charts from the files that the `add` command placed in the project.
Discussion
No questions or reviews yet.
Related
SkillsA skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Magic UI skill: an agent adds animated components to React and Next.js through the shadcn registry and checks accessibility
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Bklit UI (this card) | no | 1,899 | |
| Lightweight Charts skills for agents | yes | 17,776 | two TradingView skills for Lightweight Charts v5; here a shadcn registry with dashboard charts and a Recharts migration |
| AntV Chart Visualization Skills | no | 529 | AntV skills for choosing a chart type and building it; here React components that land in the project code |
README in short
The README shows a chart gallery with previews and links to the docs and studio, lists sponsors and gives two install commands from the shadcn registry. The components themselves are MIT licensed.
README badge
Original SKILL.md
---
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 (d3 + 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