shadcn/studio Documentation

shadcn/studio is an open-source collection of copy-and-paste shadcn components, blocks, and templates. It is not a traditional NPM-based component library; instead, it follows the shadcn philosophy of providing 'open code' that you can copy, modify, and integrate directly into your own codebase for maximum adaptability.

Key offerings include:

• Customizable Variants: Enhanced versions of standard shadcn components.
• Blocks & Templates: Pre-built layouts for dashboards and landing pages.
• Theme Generator: A tool to preview and create consistent, on-brand designs.
• Figma Integration: Design-to-code workflows via Figma components and plugins.

shadcn/studio provides several tools to bridge the gap between design and development:

• shadcn/studio MCP Server: Integrate the Model Context Protocol (MCP) server into your IDE to craft components, blocks, and pages inspired by the studio.
• Shadcn Figma UI Library: Use the full design library in Figma to match your development environment.
• Shadcn Figma To Code Plugin: Convert Figma designs into production-ready code instantly.

The Shadcn Theme Generator allows you to customize your UI in real time. Features include:

• Live Preview: See component transformations instantly.
• Color Mastery: Adjust background, text, and border hues using a color picker.
• Typography Fine-Tuning: Adjust font sizes, weights, and transformations.
• Tailwind v4 Compatibility: Supports OKLCH, HSL, RGB, and HEX formats.
• Theme Starters: Use pre-built themes for light or dark modes.
• Save Themes: Use the 'Hold to Save' feature to preserve custom themes for later use.

Because shadcn/studio is a distribution of components rather than a standard library, you do not install it via npm install. Instead, you:

1. Browse the available components, blocks, or templates at shadcnstudio.com.
2. Customize the appearance using the theme generator or component variants.
3. Copy and Paste the source code directly into your project's component directory.
4. Modify the code as needed to fit your specific logic or styling requirements.

The ThemeCustomizer component provides a UI entrypoint for users to customize shadcn/ui themes in real time. It renders a RainbowButton (with a palette icon) that, when clicked, opens a Sheet containing the ThemeControlPanel.

Key behaviors:

• Onboarding Tour: It automatically initializes a Shepherd.js tour for first-time users. The tour completion status is persisted in localStorage under the key theme-customizer-tour-completed to prevent the tour from re-running on subsequent visits.
• UI Structure: The customizer is housed within a full-height Sheet (side panel) that provides a controlled interface for theme adjustments.