shadcn/studio
Visual Theme Editor

Shadcn Theme Editor

Preview your theme changes across different components and layouts.

Total Revenue
$15,231.89

+20.1% from last month

Subscriptions
+2350

+180.1% from last month

SuMoTuWeThFrSa
Move Goal
Set your daily activity goal.
350
Calories/day
Exercise Minutes
Your exercise minutes are ahead of where you normally are.
Team Members
Invite your team members to collaborate.
OM

Sofia Davis

m@example.com

JL

Jackson Lee

p@example.com

IN

Isabella Nguyen

i@example.com

Cookie Settings
Manage your cookie settings here.
Payment Method
Add a new payment method to your account.
OM

Sofia Davis

m@example.com

Hi, how can I help you today?
Hey, I'm having trouble with my account.
What seems to be the problem?
I can't log in.
Create an account
Enter your email below to create your account
Or continue with
Share this document
Anyone with the link can view this document.
People with access
OM

Olivia Martin

m@example.com

IN

Isabella Nguyen

b@example.com

SD

Sofia Davis

p@example.com

Report an issue
What area are you having problems with?
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 Editor

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.

In Progress

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.

Coming Soon

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.