Introduction
An open-source & premium collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator & AI Tools to craft, customize, and ship faster.
In recent shadcn releases, an update was introduced to the tooltip component to address an issue related to TooltipProvider. As a result of this change, projects using the Tooltip component without an explicitly defined TooltipProvider may now encounter errors across affected blocks and components.
To resolve this, please ensure that TooltipProvider is added at the appropriate level in your layout file.
What is shadcn/studio?
This isn't a traditional component library or a replacement for Shadcn. Instead, it's a unique collection offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.
Building on the solid foundation of the Shadcn components & blocks, we've enhanced it with custom-designed components & blocks to give you a head start. This allows you to craft, customize, and ship your projects faster and more efficiently.
Not a Standard Library, but a Distribution of Components
Following the philosophy of Shadcn, shadcn/studio isn't a conventional "install-from-NPM" library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools - free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.
Why Should I use shadcn/studio?
shadcn/ui aims to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase.
While this approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. Additionally, its extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience.
This is where shadcn/studio shines ✨
An open-source & premium collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator & AI Tools to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease.
- Open-source: Dive into a growing, community-driven collection of copy-and-paste shadcn/ui components, shadcn blocks, and templates.
- Component & Blocks variants: Access a diverse, collection of customizable shadcn blocks and component variants to quickly build and style your UI with ease.
- Animated variants with Motion: Add smooth, modern animations to your components, enhancing user experiences with minimal effort.
- Landing pages & Dashboards: Explore 10+ premium & free Shadcn templates for dashboards, landing pages & more. Fully customizable & easy to use.
- shadcn/ui for Figma: Speed up your workflow with Shadcn Figma UI components, blocks & templates - a full design library inspired by shadcn/ui.
- Powerful theme generator: Customize your UI instantly with Shadcn Theme Generator. Preview changes in real time and create consistent, on-brand designs faster.
- shadcn/studio MCP: Integrate shadcn/studio MCP Server directly into your favorite IDE and craft stunning shadcn/ui Components, Blocks and Pages inspired by shadcn/studio.
- Shadcn Figma To Code Plugin: Convert your Figma designs into production-ready code instantly with the Shadcn Figma Plugin.
- Drag & Drop Builder: Build complete pages visually with drag and drop Shadcn Builder. Search and drag pre-built blocks (Hero, Features, Pricing, etc.) onto a canvas, rearrange them instantly, preview in real time, and export production-ready code or CLI install commands.