All components

Skeleton

A Skeleton component for Figma that acts as a placeholder while content is loading. Using this design asset helps to improve the perceived performance of your application and provides a better user experience.

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

Benefits

Placeholder title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse rerum voluptatum id. Facilis commodi explicabo recusandae.

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

Quick FAQs to get you started.
Still have questions? See all FAQs, or get support.

Yes. They follow shadcn/ui structure and are built for real products.

SBIOTJ

Join 3,000+ builders shipping with shadcncraft

Design and assemble full pages faster with production-ready blocks built for real products.

  • Production-ready blocks and components
  • Clean React and Tailwind parity
  • Built for SaaS, marketing, and ecommerce teams
Get the design system
Join Now CTA

Real support from the team behind shadcncraft

Get help within 24 hours from the people who build and maintain the system.

Email
Prefer a direct line? Send us a message and we'll get back to you as soon as possible.
Discord
Get quick support, share feedback, or connect with other builders.
Feedback
Got something to say about anything shadcncraft? We'd love to hear it.