Components
Sectors Donut
Allocation donut ring with a centered symbol and legend cross-highlight — hovering a legend row or arc dims the rest so one weight reads at a time. Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import { SectorsDonut } from "@/components/ui/sectors-donut"
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<SectorsDonut />
</div>
)
}
More examples
Sectors Donut DemoOpen page →
Dependencies
Published
Similar components
Explore more
Part of ssicevs UI — browse the full library on 21st.dev.