shadcn.io is an independent project built on shadcn/ui
Installation
The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.
Usage
One row per line: a label under labelKey (name by default) and the two values <Slope> reads through from and to. fromLabel and toLabel head the two columns, and a row missing either value is left out.
import { ChartTooltip, Slope, SlopeChart } from "@/components/ui/charts";
const data = [
{ name: "Web", before: 62, after: 71 },
{ name: "iOS", before: 58, after: 66 },
{ name: "Android", before: 64, after: 61 },
{ name: "Desktop", before: 49, after: 55 },
];
export const SatisfactionChart = () => (
<SlopeChart
ariaLabel="Satisfaction by platform, before and after"
data={data}
>
<Slope from="before" fromLabel="Before" to="after" toLabel="After" />
<ChartTooltip />
</SlopeChart>
);Anatomy
There are no axes or grid: the labels at each end carry the values. <Slope> draws the whole chart, and <ChartTooltip> adds the panel on hover.
<SlopeChart data={data} labelKey="country">
<Slope from="y2025" fromLabel="2025" to="y2026" toLabel="2026" />
<ChartTooltip />
</SlopeChart>SlopeChart: Two columns on one shared scale, a line for each row.Slope: The lines, a dot at each end, the column headings and the labels.ChartTooltip: Both values and the change, as a difference and a percentage.
When lower is better
Lines that rise use increaseColor (--chart-1) and lines that fall use decreaseColor (--chart-negative). A line that stays level counts as rising.
When a drop is the good outcome, as with response times or costs, give decreaseColor the accent and mute increaseColor.
Customization
The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.
class goes on the chart's container, so size and spacing are utility classes.
Each end is labeled with the row's name and value. Where two labels would collide they're pushed apart, recomputed at every size, and the side margins grow to fit the longest one. Pass showLabels={false} to drop them and rely on the tooltip.
formatValue formats the labels and the tooltip. To show fields of your own on hover, pass rows, which receives the row as you wrote it.
<ChartTooltip
rows={(row) => [
{ color: "var(--chart-1)", label: "Score", value: `${row.y2025} → ${row.y2026}` },
{
color: "transparent",
label: "Responses",
value: Number(row.responses).toLocaleString(),
},
]}
/>Where a part renders content of its own, you pass it in. In Solid:
ChartTooltip:content={({ point, index }) => …}
Loading state
With status="loading" the chart draws skeleton slopes and ignores the pointer. Switch to "ready" and the real lines wipe in from the first column.
Before there's any data, render <SlopeChartLoading /> in the chart's place.
Animation
The chart wipes in from the first column to the second over animationDuration (1100 ms). Pass animate={false} to draw it at once.
Theming
Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.
Only two colors carry meaning here, rising and falling, so most charts need nothing more than increaseColor and decreaseColor. Labels use --chart-label, and the dots have a ring in --chart-background.
| Token | Default | Paints |
|---|---|---|
--chart-1 | your theme's | the first series |
--chart-negative | --destructive | values below the baseline in profit and loss |
--chart-background | --card | dot halos, the gaps between stacked marks |
--chart-label | --muted-foreground | tick labels |
--chart-tooltip-background | --popover | the tooltip panel |
:root {
--chart-background: var(--background);
--chart-label: var(--foreground);
}Accessibility
The chart is an image named by ariaLabel ("Slope chart" by default). Name the two columns in it, such as "2025 and 2026", and sum up what rose and what fell in ariaDescription.
- Tab
- Moves focus to the chart, on the line that ends highest.
- Arrow Down
- Moves to the next line down, ordered by the second column. ArrowRight does the same.
- Arrow Up
- Moves to the line above. ArrowLeft does the same.
- Home
- Jumps to the top line.
- End
- Jumps to the bottom line.
API reference
Solid takes the same props as React, with class for className. A render prop is a function, called again when its arguments change, so destructured parameters stay current.
SlopeChart
datareadonly Record<string, unknown>[]
The rows, one line each: a label under labelKey and the two values the Slope reads.
- Type
readonly Record<string, unknown>[]
labelKey?string
The key of each row's label.
- Default
"name"
aspectRatio?string | number
Aspect ratio of the chart, as "width / height" or a number.
- Type
string | number- Default
"4 / 3"
margin?Partial<ChartMargin>
Space around the plot in px. The sides make room for the labels.
- Type
Partial<ChartMargin>
animate?boolean
Animate the lines in on mount, drawn from the first column to the second.
- Default
true
animationDuration?number
Length of the entrance in milliseconds.
- Default
1100
ariaLabel?string
Accessible name of the chart.
- Default
"Slope chart"
ariaDescription?string
Longer accessible description of the chart.
class?string
Extra class name for the chart container.
style?CSSProperties
Inline styles for the chart container.
children?ReactNode
The chart's parts: Slope and ChartTooltip.
status?ChartStatus
"loading" draws a shimmering skeleton shaped like the chart in place of its marks and ignores the pointer; switching to "ready" plays the chart's entrance.
- Default
"ready"
loadingLabel?string
Centered label shown over the plot while status is "loading".
Slope
fromstring
The key of each row's first value (the before).
tostring
The key of each row's second value (the after).
fromLabel?string
The first column's heading. Defaults to from.
toLabel?string
The second column's heading. Defaults to to.
increaseColor?string
Colour of the rising lines.
- Default
"var(--chart-1)"
decreaseColor?string
Colour of the falling lines.
- Default
"var(--chart-negative)"
strokeWidth?number
Width of the lines in px.
- Default
2
showLabels?boolean
Write each row's label and value beside its ends.
- Default
true
formatValue?(value: number) => string
Formats a value in the labels and the tooltip. Defaults to a grouped number.
- Type
(value: number) => string
fadedOpacity?number
Opacity of the other lines while one is hovered.
- Default
0.18
ChartTooltip
showDatePill?boolean
Show the date pill that rides along the bottom of the plot.
- Default
true
showCrosshair?boolean
Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).
- Default
true
showDots?boolean
Show a dot on every series at the hovered position.
- Default
true
dotVariant?"dot" | "ring"
Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.
- Type
"dot" | "ring"- Default
"dot"
dotSize?number
Dot radius in px.
- Default
5
dotRadiusFraction?number
Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.
- Default
0.25
dotScale?number
Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.
- Default
1
dotStrokeWidth?number
Stroke width of the dots in px.
- Default
2
indicatorColor?string | ((point: Record<string, unknown>) => string)
Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.
- Type
string | ((point: Record<string, unknown>) => string)- Default
"var(--chart-crosshair)"
content?(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode
Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).
- Type
(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode
pinnable?boolean
A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.
- Default
false
rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]
Replaces the default rows (one per series) with your own list of { color, label, value }.
- Type
(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]
dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)
Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.
- Type
string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)
children?ReactNode
Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.
class?string
Extra class name for the tooltip panel.
springConfig?SpringConfig
Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.
matchCrosshair?boolean
Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.
- Default
false
damping?number
Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.
- Default
20
indicatorDasharray?string
Dash pattern of the crosshair. Omit for a solid line.
indicatorFadeEdges?IndicatorFadeEdges
Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).
- Default
"both"
indicatorFadeLength?number
Size of the crosshair's fade, as a percentage of its height (2 to 40).
- Default
10
indicatorEndColor?string
Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).
indicatorEnd?"plot" | "point"
How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.
- Type
"plot" | "point"- Default
"plot"
dotHaloBlur?number
Blur in px on the dots' halo, for a soft glow.
- Default
0
topOffset?number
Extra gap in px between the top of the plot and the tooltip panel.
- Default
0
dateLabels?readonly string[]
The date pill's text for each data row, in row order (pair it with XAxis labels).
boxSpringConfig?SpringConfig
Spring for the floating panel. Takes priority over matchCrosshair and damping.
indicatorWidth?IndicatorWidth
Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).
- Default
"line"
SlopeChartLoading
margin?Partial<ChartMargin>
Space around the plot in px. Missing sides use the chart's default.
- Type
Partial<ChartMargin>
aspectRatio?string | number
Aspect ratio of the placeholder, as "width / height" or a number.
- Type
string | number- Default
the chart's
label?string
Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.
loadingLabel?string
Deprecated: Use label, the name every chart's placeholder takes..
class?string
Extra class name for the chart container.
Examples
3 examples on Solid, each live with its code and its own install command.
