Sparklines

A KPI card needs a trend, not a chart: no axes, no grid, no tooltip, and it has to stay cheap when there are fifty of them on the page. LineSparkline, AreaSparkline and BarSparkline are built for exactly that. Pass data and a dataKey and they fill their parent at 32px tall.

Built for density

Each sparkline renders a single <path>, bars included. Every responsive sparkline on the page shares one ResizeObserver, and passing a fixed width skips measuring entirely. Only the hovered instance re-renders, so a grid of 200 stays smooth.

Enter animations, on by default

Animations run on the Web Animations API instead of React state. Lines draw in along their stroke, areas wipe in and bars grow from the baseline. Tune them with animationDuration and animationEasing, or pass animate={false}. With reduced motion turned on, each one becomes a short fade.

Hover without a tooltip

A crosshair and a dot follow the nearest point. The crosshair is "dashed" by default; choose "solid", "gradient" or false. There's no tooltip on purpose. Use useSparklineHover to read the hovered datum and show it wherever you like, such as the big number on the card. Spread its sparklineProps onto several sparklines and their crosshairs move together.

Everywhere you look

• Gallery and Studio: browse them at /charts/sparkline and try every prop in Studio.
• Recipes and blocks: a new KPI sparklines recipe joins the recipes, and the quiet-sparkline recipe and stat-card blocks now use the new components.
• Installing: add them with the sparkline shadcn item.
• Migrating: the migrate skill now maps Recharts Tiny charts and TanStack Charts sparklines to these components.

See the sparkline docs for every prop.

The hardest part of a good chart is rarely the data — it's the look. Recipes is a gallery of finished treatments you can lift straight into your app: faded pattern backgrounds, squircle bars, custom hover indicators, event markers, forecasts, range bands, heatmap and donut styles.

One look, every chart

Pick a recipe, then switch between the charts it applies to. Each one shows the exact code for that chart, so you are never translating a bar-chart example into an area chart by hand.

Prompts for your agent

Every recipe ships with a prompt written for the Bklit UI agent skills — per chart, or for all charts at once. Paste it into your coding agent and it applies the treatment to the charts already in your codebase, using the right components and props.

Studio, tidied up

Layer visibility now works across every chart in Studio: toggling a layer's eye hides it in the preview, whichever chart you're editing. Settings that silently did nothing are either wired up or gone, and the palette switcher animates between its list and customise views.

Recipes replaces Blocks in the site navigation. The Blocks page is still there.

Sometimes a tooltip is one interaction too many. Area and bar charts can now print their values directly on the chart — turn it on with showValue and the chart decides where each label can go. Anything that would collide or overflow is hidden rather than clipped.

Bars

A bar label appears only when it fits inside its bar. By default the chart tries horizontal text first, rotates it when vertical text fits better, and hides it when neither does. You can lock the orientation, and move the label to the top, centre or base of the bar.

Areas

Area labels sit above a sample of points rather than every one, so the line stays readable. Stacked series share one label count so their labels line up, and you can set a minimum and maximum per series.

Built to resize

Every fit check re-runs as the chart changes size. A dense chart shows fewer labels on a phone than on a laptop — never overlapping, never cut off. Numbers default to English digits; pass valueLabelFormatter for currency or localised output.

Studio has controls for all of it, and they carry through to the generated code. See the bar chart and area chart docs.

Tooltips are the part of a chart people touch most, so this week they got the most attention.

A panel that matches your app

The panel now looks like the popovers in shadcn and coss ui: a rounded frame with a hairline border, a soft shadow, and a header row separated from the values. Series get small colour dots, labels are muted, and values are right-aligned in tabular figures so columns of numbers line up. Its colours come from your popover tokens, so it follows your theme without extra setup. Building custom tooltip content? The new TooltipHeader gives you the same header.

Hover dots with a halo

The default hover dot is now a solid core inside a soft halo of the same colour. Both spring open when you hover and follow the tooltip as you move. Tune them with dotHaloScale and dotHaloOpacity.

Motion that feels connected

• Every tooltip fades out when the pointer leaves, instead of vanishing. Pass exit={false} for the old behaviour.
• Heatmap tooltips spring from cell to cell like the other charts instead of snapping.
• Jittered scatter tooltips sit beside the point you are on and spring to the other side when they run out of room, rather than pinning to the top of the plot.
• Reduced motion is respected: the panel jumps into place and keeps only a short fade.

Bar charts lose the crosshair

A vertical crosshair line helps on a line chart and gets in the way on a bar chart. Bar charts now hide it by default; pass showCrosshair to bring it back.

See the Tooltip docs for every option.

When many rows share the same date, scatter points pile on top of each other and a hundred values look like five. Pass jitter to ScatterChart and they spread out sideways (and optionally vertically) into a strip plot you can actually read.

Deterministic by design

The offsets come from a seeded hash, not Math.random. Points land in the same place on every render and on both the server and the client, so nothing jumps after hydration or when data updates. Change the seed if you'd prefer a different arrangement.

Hover still tells the truth

Hover snaps to the nearest jittered point and the tooltip shows its real values, not the nudged position. The crosshair line is hidden by default for jittered charts, since it would point at a date rather than the point you are on.

New defaults

Scatter now dims inactive points with opacity instead of blur, and drops the ring around each point — a quieter default that reads better in dense plots. To keep the previous look, pass strokeWidth={2} and inactiveMode="blur".

See the scatter chart docs for the full jitter options.

Alongside the bigger releases, a long list of things that now simply work the way you'd expect.

Charts

• Bar charts handle negative values. The scale always includes zero and bars grow from the zero line in both orientations — profit and loss charts now just work.
• Stacked horizontal bars draw every segment at the right width and grow from their own position instead of overlapping while they animate.
• Line charts morph smoothly when their data changes, rather than snapping to the new values.
• Markers and edge points are no longer clipped at the edge of the plot.
• Ring charts no longer flicker when you hover near the inner edge of a ring.
• Custom PieCenter content shows at rest, not only while hovering a slice.
• Persian, Arabic and Hebrew labels animate as a single run so letters stay joined and in order, and the date ticker only scrolls the part of the date that changed.

Installing with shadcn

• Charts installed from the registry keep their imports valid in your project's folder layout.
• Theme tokens map correctly into your @theme variables.
• Every chart passes the React Compiler lint rules.

Docs and site

• A new Markers page, and an up-to-date Theming guide.
• "New" badges in the sidebar and mobile menu, which now share one navigation.
• Better page titles, social cards and structured data across the site.

Palettes

Charts now default to a primary palette — indigo, yellow, fuchsia, mist and black-and-white — and come with a set of curated multi-hue palettes shared by the docs and Studio. Pick one from the palette menu, fine-tune any colour with the Studio colour picker, and export the result as CSS variables.

Trend charts get semantic --chart-positive and --chart-negative tokens, so gains and losses stay meaningful in any palette. The heatmap scale now derives from your first chart colour.

Weekends and Deadline

Two small primitives that make time-series charts easier to read at a glance. Weekends shades weekend days behind the series, with stripes or a solid fill. Deadline marks a due date with a line and a fading region after it — striped, gradient or solid.

A faster chart catalogue

/charts has been rebuilt around a sticky sidebar that tracks where you are and links straight to any variation. Charts only mount as they scroll into view, so the page stays fast however many examples it holds.

Read more in the Weekends and Deadline docs.

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.