Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
New here? Read the installation guide.
import { Dashboard9 } from "@/components/beste/piece/dashboard9";
<Dashboard9
slices={[
{
"label": "Subscriptions",
"value": 52
},
{
"label": "One-time",
"value": 28
},
{
"label": "Add-ons",
"value": 14
},
{
"label": "Refunds",
"value": 6
}
]}
total="$48.2K"
totalLabel="Revenue"
/>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.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.