✦Your Perfect Theme Creator

Design Your Perfect

Custom Theme

Create stunning, accessible themes using Radix colors. Get built-in dark mode and accessibility. Set up once, customize infinitely.

Real-time Preview
Export to Tailwind
Customize infinitely

Color Palette

CanvasPrimary

Preview

ui
oklch, hsl, rgb, hex
✦Theme Presets

Elevate Your Design Instantly

Apply theme presets with a single click. See how each option enhances the look.

Modern Minimal

Twitter

Amethyst Haze

Catppuccin

Kodama Grove

Quantum Rose

Elegant Luxury

Neo Brut

Modern Minimal

Twitter

Amethyst Haze

Catppuccin

Kodama Grove

Quantum Rose

Elegant Luxury

Neo Brut

Mocha Mousse

Notebook

Graphite

Cosmic Night

Nature

Amber Minimal

Solar Dusk

Pastel

Mocha Mousse

Notebook

Graphite

Cosmic Night

Nature

Amber Minimal

Solar Dusk

Pastel

Bubblegum

Doom 64

Perpetuity

Tangerine

Bold Tech

Supabase

Claymorphism

Clean Slate

Bubblegum

Doom 64

Perpetuity

Tangerine

Bold Tech

Supabase

Claymorphism

Clean Slate

✦Features

Powerful Customization Tools

All the tools you need to customize your radixui components and make them unique.

Color Management

Adjust background, text, and border hues using a user-friendly color selector. We've incorporated the newest Tailwind v4 color options for seamless integration.

Font Adjustments

Refine font dimensions, boldness, and text modifications to achieve an ideal appearance.

Tailwind v4 & v3 Compatibility

Effortlessly toggle between Tailwind v4 and v3, offering backing for various color systems like OKLCH and HSL.

Tailwind Attributes

Precisely calibrate all elements of your UI parts, including curves, gaps, shades, and additional Tailwind features.

Contrast Evaluator

Guarantee your layouts adhere to accessibility guidelines through integrated contrast assessment for text against backgrounds.

Export & Integration

Export your theme as CSS variables, Tailwind config, or JSON. Seamlessly integrate with your existing projects and workflows.

✦Testimonials

Loved by developers worldwide

See what the community is saying about designrift

Y

YiMing

@yiming_dev

Using v0, designrift, and ChatGPT for graphics. Built a landing page in around 2 hours. It's amazingly easy nowadays.

G

Guillermo Rauch

@guillermo_r

If you want to learn full stack Next.js and how to build a product people love, look no further than designrift. It's an open-source theme builder.

s

shadcn

@shad_dev

Finally, a custom theme from designrift.

K

Kevin Kern

@kevin_k

designrift is awesome. Generates custom shadcn themes instantly.

O

OrcDev

@orc_dev

Transform your Shadcn app with one click! Great concept with designrift.

Y

YiMing

@yiming_dev

Using v0, designrift, and ChatGPT for graphics. Built a landing page in around 2 hours. It's amazingly easy nowadays.

G

Guillermo Rauch

@guillermo_r

If you want to learn full stack Next.js and how to build a product people love, look no further than designrift. It's an open-source theme builder.

s

shadcn

@shad_dev

Finally, a custom theme from designrift.

K

Kevin Kern

@kevin_k

designrift is awesome. Generates custom shadcn themes instantly.

O

OrcDev

@orc_dev

Transform your Shadcn app with one click! Great concept with designrift.

C

Ciara Wearen

@ciara_w

Create a Custom Theme: Makes your app look more intentional. Build color palette, typography, and layout preview with designrift.com Grab the CSS and drop into your project for cohesive design.

T

Tanpreet Jolly 🌂

@tanpreet_j

I just tried designrift and it's perfect. This is exactly what I needed, great work!

C

Code With Antonio

@antonio_c

There's an entire chapter dedicated to designrift!! Such a cool project.

E

Emir

@emir_dev

Started using designrift for client projects as well. It's a real game changer.

M

Matt Silverlock 🐀

@matt_s

Used this shadcn theme editor to make it less plain: designrift.com

C

Ciara Wearen

@ciara_w

Create a Custom Theme: Makes your app look more intentional. Build color palette, typography, and layout preview with designrift.com Grab the CSS and drop into your project for cohesive design.

T

Tanpreet Jolly 🌂

@tanpreet_j

I just tried designrift and it's perfect. This is exactly what I needed, great work!

C

Code With Antonio

@antonio_c

There's an entire chapter dedicated to designrift!! Such a cool project.

E

Emir

@emir_dev

Started using designrift for client projects as well. It's a real game changer.

M

Matt Silverlock 🐀

@matt_s

Used this shadcn theme editor to make it less plain: designrift.com

✦FAQs

Everything you need to know

Get answers to the most common questions about designrift

DesignRift is a powerful theme builder that leverages the Radix Colors system to create beautiful, accessible design systems. Simply choose your colors, customize your palette, and export ready-to-use themes for any framework. Our visual editor makes theme creation intuitive - no design experience required.
Getting started is simple! Install DesignRift with npm install designrift, then use our theme builder interface to select your primary colors and generate a complete color system. You can preview changes in real-time and export your theme as CSS variables, design tokens, or framework-specific configurations.
DesignRift is framework-agnostic and works with any web technology. We provide native support for:

• React, Vue, Angular, and Svelte components
• CSS Variables and custom properties
• Tailwind CSS configuration files
• Design tokens for Figma and other design tools
• Sass/SCSS variables and mixins
Absolutely! All DesignRift themes are built on the Radix Colors system, which ensures WCAG AAA compliance by default. Every color scale is carefully designed with proper contrast ratios for text, backgrounds, and interactive elements. Dark and light modes are automatically generated with optimal accessibility.
Yes! DesignRift offers extensive customization options. You can create custom color palettes, adjust individual color steps, modify semantic tokens, and even create brand-specific variations. Our advanced editor allows fine-tuning of contrast ratios, saturation levels, and hue shifts to match your exact brand requirements.

🎨 Visit Designrift to get started with theme customization.

Ready to Elevate Your Components?

Start customizing your design today and give your application a distinctive, polished look.

Completely free. No account needed. 100% open source.