All components
Date Picker
A DatePicker component for Figma, which is a date field that allows users to enter and edit a date. This UI element includes a calendar interface for easy date selection in booking and scheduling applications.
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 3,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