Single horizontal bar divided into tinted segments by percentage, with a legend row below.
The import and the props worth knowing about, in one place.
import { Progress6 } from "@/components/beste/piece/progress6";
<Progress6
title="Storage breakdown"
segments={[
{
"label": "Media",
"value": 42,
"tone": "emerald"
},
{
"label": "Docs",
"value": 18,
"tone": "sky"
},
{
"label": "Cache",
"value": 12,
"tone": "amber"
},
{
"label": "Other",
"value": 8,
"tone": "muted"
}
]}
/>