shadcn/studio is an open-source extension for shadcn/ui that provides a curated collection of copy-and-paste components, pre-built blocks, and page templates.
You can use it to accelerate UI development. Preview components and blocks, adjust their appearance using the built-in theme editor, and then copy the generated code directly into your application.
Features
🎨 Component & Block Variants: Access a wider variety of pre-designed shadcn component styles and structural blocks.
🖌️ Live Theme Editor: Customize themes in real-time with immediate visual feedback on components.
💡 Tailwind Support: Works with TailwindCSS, supporting OKLCH, HSL, RGB & HEX color formats.
🎬 Animated Variants: Incorporate smooth animations using Motion for specific component variants.
💾 Save Custom Themes: Persist your created themes for reuse or sharing.
✍️ Typography Adjustments: Modify font sizes, weights, and transformations for precise text styling.
Usage
- Visit the shadcn/studio website.
- Browse the available Components, Blocks, or Templates.
- Use the integrated Theme Editor to customize the appearance (colors, typography, etc.) to fit your needs. You can preview changes live.
- Select the variant or element you wish to use.
- Copy the provided code snippet.
- Paste the code directly into your project’s codebase. You have full control to modify it further.
Related Resources
- shadcn/ui: The original library providing the foundation for shadcn/studio. It offers reusable components you copy into your apps. https://ui.shadcn.com/
- Tailwind CSS: The utility-first CSS framework used by both shadcn/ui and shadcn/studio for styling. https://tailwindcss.com/
- tweakcn: The project that inspired the theme editor in shadcn/studio, focused on tweaking shadcn/ui themes. https://tweakcn.com/
FAQs
Q: Is shadcn/studio a replacement for shadcn/ui?
A: No, shadcn/studio is an extension of shadcn/ui. It provides more variants, blocks, templates, and a theme editor, building upon the original library’s components and philosophy.
Q: How do I install shadcn/studio components?
A: You do not install shadcn/studio components via a package manager. You browse the registry, customize components using the theme editor if needed, and copy-paste the code directly into your project.
Q: What is the main benefit over using only shadcn/ui?
A: shadcn/studio offers a wider variety of pre-styled component variants, ready-to-use blocks, page templates, and a powerful theme editor for easier customization, potentially speeding up development.
Q: Can I customize the code after pasting it?
A: Absolutely. The core idea, inherited from shadcn/ui, is that you own the code once you paste it. You can modify styles, logic, or structure as required by your application.
