Band and TrendLine

Two new layers for showing what's around and underneath your data.

Band

Band fills the space between an upper and a lower value — confidence intervals, min–max ranges, forecasts. Fill it solid, with a gradient or with a pattern, style each edge on its own, and fade any of its four sides. It draws in with the line it sits behind.

Bands also work on their own as range areas. The tooltip shows each band's low–high range with a dot on both edges, and the chart's scale fits the bands even when there's no line. For finance charts, withBollingerBands works the bands out for you.

TrendLine

TrendLine draws the straight line of best fit through a series, so the direction of noisy data is obvious at a glance. Make it solid, dashed or a gradient, with optional faded ends. It works in line, area and composed charts, and in bar charts in either orientation.

Both are layers in Studio. See the Band and TrendLine docs.

Bklit UI has a new home. The site, docs and Studio now use coss ui components and its colour palette in place of our shadcn primitives.

Frames and rails

Pages sit between two thin rails that now run all the way up through the header, with small square rivets where section dividers meet them. Docs pages sit in frames on a tinted canvas, and every component has its own illustration.

Cal Sans

Headings and body text now use Cal Sans, the same typeface as coss ui, for a tighter and friendlier voice.

A simpler homepage

The homepage hero has been pared back, and the community showcase has moved to its own Showcase page.

Studio keeps its square, tool-like chrome. The navigation and every URL stay the same.

Performance claims are easy to make and hard to check. Benchmarks lets you check ours: it runs Bklit UI, Recharts and TanStack Charts against the same seeded data — line, area, bar and scatter — in your own browser.

What it measures

Each run reports how long a chart takes to mount, to update and to respond to hover, how many DOM nodes it creates, and how much it adds to your bundle, then combines them into a score. Enter animations are timed for reference but never scored, so no library is penalised for animating.

Smaller tooltip dates

Building it, we also made the tooltip's date pill fit its label: it measures the current date and springs its width as you move, instead of sizing itself to the longest month.

Bklit UI ships agent skills — instructions your coding agent loads so it uses the right components and props instead of guessing. Two new ones join the core skill.

npx skills add bklit/bklit-ui

bklit-ui-design

Describe the look you want in plain words — "faded pattern background", "squircle bars", "3D glass bars", "hatched area", "skeleton loading", "match our brand" — and the agent maps it to real Bklit components and props. It checks your Tailwind version, colour format, dark mode and corner radius first, so the result fits your app.

bklit-ui-migrate

Point your agent at a codebase using Recharts, directly or through shadcn's chart component. It finds every chart, sorts them into ones that convert cleanly, ones that need a workaround, and ones to leave on Recharts, then converts them to Bklit UI and checks the result.

The core bklit-ui skill has been rewritten alongside them.

Gauge has a new orientation="linear" mode that lays its notches along a horizontal bar — the same geometry, fills, gradients and enter animations as the arc, in a shape that fits table rows and cards.

The center label is optional. In linear mode, place it above or below the track with labelPlacement and align it with labelAlign — the same six positions as a chart legend.

See the Gauge docs.

HeatmapChart is here. Cells animate smoothly between the loading and ready states, and every level from Less to More shares one style — a base color plus an optional pattern, used by both the cells and the legend.

In Studio, the levels live in collapsible panes with the same pattern controls as Background.

The heatmap is in the docs, the gallery and the shadcn registry. See the heatmap chart docs.