shadcn/studio-svelte
Visual Theme Generator

Shadcn Theme Generator

Preview your theme changes across different components and layouts.

Tasks
Features

Design Your Perfect UI with Ease

Transform your shadcn components in real time—customize, save, and ship stunning interfaces faster than ever.

Live Theme Generator

See your shadcn components transform instantly as you experiment with styles in real time.

Color Mastery

Play with background, text, and border hues using a sleek color picker for a unified design.

Typography Fine-Tuning

Perfect your text with adjustable font sizes, weights, and transformations for a polished look.

Tailwind v4 Compatibility

Effortlessly use Tailwind v4, supporting OKLCH, HSL, RGB & HEX color formats.

Stunning Theme Starters

Kick off with gorgeous pre-built themes and customize light or dark modes in a breeze.

Hold to Save Theme

Preserve your custom themes with a quick hold, making them easy to reuse or share later.

Roadmap

What's Coming Next

Discover the latest updates and features we're working on to enhance your experience.

Shadcn Theme Generator

Design and manage full themes with presets to style your entire application effortlessly.

In Progress

Theme Import/Export

Customize and save your themes, then import or export them with ease for seamless workflows.

In Progress

Shadcn Figma UI Kit

Streamline your design-to-development process with a shadcn UI kit for Figma, plus a dedicated Figma plugin.

Coming Soon

Shadcn Component Variants

Access an open-source collection of extended shadcn component variants for rapid UI building.

In Progress

Shadcn Animated Variants

Build dynamic and captivating UI with an open-source and premium set of animated components, blocks, templates, and effects.

In Progress

Shadcn Blocks & Templates

Accelerate your workflow with an open-source and premium collection of ready-to-use blocks and templates.

Coming Soon
FAQ

Frequently Asked Questions

Find answers to common questions about shadcn/studio.