Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
The import and the props worth knowing about, in one place.
import { Dashboard5 } from "@/components/beste/piece/dashboard5";
<Dashboard5
surface="card"
bordered={true}
inverted={false}
title="Top sources"
items={[
{
"label": "Direct",
"value": 4820
},
{
"label": "Google",
"value": 3610
},
{
"label": "Twitter",
"value": 1890
},
{
"label": "Referral",
"value": 980
}
]}
tone="violet"
/>Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.