All components
Empty
An Empty component for Figma, used to display an empty state when there is no content or data to show. It helps communicate context, guide user action, and prevent confusion when a view has no results or items yet.
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