All components
Toggle Group
A ToggleGroup component for Figma, consisting of a set of two-state buttons that can be toggled on or off. This design asset is used for selecting multiple options from a group or for creating clear on/off controls in your user interface designs.
Official shadcn/ui
Figma
Official shadcn/ui component. Available as part of our Base, Pro, and Pro + React Design Systems. For code and installation instructions, view the official shadcn/ui docs
SBIOTJ
Join 9,000+ builders shipping with shadcncraft
Get access to this component and the full library
Production-ready blocks and components with matching Figma and React.
Benefits
Built for real interfaces
Each block is designed to work as part of a complete page, not just as a visual fragment.
Structured Layouts
Clear grids, consistent spacing, and predictable hierarchy.
Marketing + App Coverage
Landing pages, dashboards, onboarding, pricing, e-commerce, and more.
Theme Compatible
Works seamlessly with semantic tokens and theming.
Production-Ready States
Designed with real content, tokenized spacing, and real interaction patterns.
Figma + React Parity (Pro + React)
Design in Figma and ship with aligned React components.
Composable by Design
Mix blocks together to create complete pages without layout conflicts.
Frequently Asked Questions
Yes. They follow shadcn/ui structure and are built for real products.
All components