About this piece
Bar Chart Card
Card with a label, headline value, and a row of vertical bars scaled to the data.
Usage
The import and the props worth knowing about, in one place.
import { Chart1 } from "@/components/beste/piece/chart1";
<Chart1
surface="card"
bordered={true}
inverted={false}
label="Sessions · this week"
value="8,214"
data={[
42,
68,
54,
81,
36,
72,
90
]}
tone="primary"
/>More Card pieces
View all Card
BS
Beste SözenDesign lead
Org Chart
Mini org-chart card with a manager node branching down into three direct-report avatars.
Revenue
This week$48.2K
Last week$42.9K
Comparison Bar
Two horizontal bars comparing this period against the previous one.
Studio
$39per month
- Unlimited blocks
- Team workspaces
- Priority support
Plan Card
Pricing tier with a headline amount, period, and a stack of check-marked features. Featured tier flips to primary.