About this piece
Sparkline Card
Mini SVG line plotting any number array. Tone sets the stroke color.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Revenue · 30d$48.2k
Usage
import { Card2 } from "@/components/beste/component/card2";
<Card2
surface="card"
bordered
label="Revenue · 30d"
value="$48.2k"
data={[12,18,14,22,20,28,24,32,30,38,36,44]}
tone="success"
/>Usage
The import and the props worth knowing about, in one place.
import { Card2 } from "@/components/beste/piece/card2";
<Card2
surface="card"
bordered={true}
inverted={false}
label="Revenue · 30d"
value="$48.2k"
data={[
12,
18,
14,
22,
20,
28,
24,
32,
30,
38,
36,
44
]}
tone="success"
/>More Card pieces
View all CardMRR · 90d$124K
Area Chart
SVG line with a soft gradient fill beneath. Tone colors the stroke and fade.
- Direct48%
- Referral24%
- Social18%
- Search10%
Pie Chart
Flat-fill pie beside a legend. Each slice picks a tone from a fixed six-color palette.
BS
Beste SözenDesign lead
Org Chart
Mini org-chart card with a manager node branching down into three direct-report avatars.
