Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
The import and the props worth knowing about, in one place.
import { Dashboard9 } from "@/components/beste/piece/dashboard9";
<Dashboard9
surface="card"
bordered={true}
inverted={false}
slices={[
{
"label": "Subscriptions",
"value": 52
},
{
"label": "One-time",
"value": 28
},
{
"label": "Add-ons",
"value": 14
},
{
"label": "Refunds",
"value": 6
}
]}
total="$48.2K"
totalLabel="Revenue"
/>$0total
The total counts up while the donut draws one slice after another, each legend row sliding in as its arc lands.
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.
Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.