Skip to main content
Urbicon UI
source

Sparklinebeta

Tiny inline trend line — no axes — sized to flow in table cells, cards, or text.

Playground

Loading syntax highlighting...

01 Examples

Line vs. area

A bare trend line, and the same data with `area` filled — both shrink to whatever width and height you give them.
Loading syntax highlighting...

In a stat card

A KPI number paired with its recent trend — the canonical sparkline use case.

Revenue (7d)

€42k
Loading syntax highlighting...

In table rows

Sparklines line up in a column to make per-row trends scannable. Color each line to encode direction.
AccountTrend
Acme Corp
Globex
Initech
Loading syntax highlighting...

Direction color

Pass `color` to signal up vs. down at a glance.
Loading syntax highlighting...

02 Accessibility

Decorative by default

A sparkline usually accompanies a number that already conveys the value, so it is aria-hidden by default to avoid redundant screen-reader noise.

Opt-in labelling

When the trend is the only information present, pass ariaLabel — the sparkline then exposes role="img" with that label (e.g. "Revenue trending up over 7 days").

04 API Reference

12 props
12 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt