27 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Key figures as a description list: the big narrow figure (rolling digit by digit when numeric, 60 ms apart) above its label, with the unit at half size on the baseline ("+", "min", "/5"), a mono note, an optional index and a delta pill. rules is the mockup's band: figures between 2 px column rules, four across at lg and two on phones; put it in Section tone="tint-1" space="none" (volt) or tone="inverse" (ink). cards is flat cards; plain has no lines.
A KPI: a mono label, a narrow 800 figure (tabular-nums, never wraps), a square delta pill (volt for good news, tomato for bad, paper-2 for flat) with screen-reader text ("up 12.4%"), and a hint.
A line, area or bar chart in SVG with HTML labels, so text never stretches with the fluid width.
A number that counts up, or rolls digit by digit like an odometer (variant="roll", the kit's figure motion), when it comes into view.
A labelled bar: an ink-outlined pill whose fill (cobalt by default) slides in from the start the first time it is in view, its ink edge marking the value.
Data table from columns and rows in an ink-outlined, focusable scroll region: mono caps heads on paper-2, soft row rules, a volt wash on row hover, numeric columns in mono and aligned to the end.
The live-sync drawing: rows of card-white source chips (icon in a small paper-2 chip) joined by ink wires that carry volt packets into a volt hub.
Key figures as a description list: each value (a display figure counting up into view when numeric, its suffix smaller in ink-3) sits visually above its label, with an optional mono index ("01 · Teams"), note and change.
A KPI: label, value (type-display tabular-nums, never wraps), a mono delta pill (▲ / ▼) whose colour says good or bad news, and a hint, always stacked so a row of metrics shares baselines.
A line, area or bar chart in SVG with HTML mono labels, so text never stretches with the fluid width.
A number that counts up, or rolls digit by digit like an odometer (variant="roll"), when it comes into view.
A labelled bar with a mono value.
Data table from columns and rows, inside a hairline tile that is a focusable scroll region, so wide tables scroll inside it on phones.
Before and after as mono capital rows with a bar each: past rows in quiet ticks, the current row filled with aurora light and its value in aurora.
The live-sync diagram for a bento tile: source chips on the left (an icon chip, the name and a status dot), a glowing hub in the middle with a mono caption, and output cards on the right (a Metric-like value with a delta, a badge or a mono meta line).
Key figures as a description list: each value (rolling in when numeric) sits visually above its label, with an optional note, index and change.
A KPI: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint.
A line, area or bar chart in SVG with HTML labels, so text never stretches with the fluid width.
A number that counts up, or rolls digit by digit like an odometer (variant="roll", the Soft Bento signature: digit strips on a spring), when it comes into view.
A labelled bar.
Data table from columns and rows, inside a focusable scroll region, so wide tables scroll inside it on phones.
Key figures as a description list: a mono index row, the big figure (type-figure, counting up when numeric) with its accent "+" and mono units, the label, a note or change, and an optional mini visual (viz).
A KPI: mono caps label, a tabular value (never wraps), a change tag (lime when the news is good, red when it is bad) and a mono hint.
A line, area or bar chart in SVG with HTML labels, so text never stretches with the fluid width.
A number that counts up, or rolls digit by digit like an odometer (variant="roll"), when it comes into view.
A labelled bar.
Data table from columns and rows: mono caps heads under a rule, hairline rows, mono numbers aligned to the end, inside a focusable scroll region, so wide tables scroll inside it on phones.
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.