Dracula UI

A dark-first collection of UI patterns and components

Build modern websites faster.

Dracula UI makes it easy to create beautiful dark apps using plain HTML or React components.

Works with your favorite libraries

Built for Dark Mode

Most templates are built using light colors and later on adapted to dark colors.

Dark themes shouldn't be an afterthought, they should be a top priority.

Designer Friendly

Speed up the prototyping phase by using a highly configurable Design System.

Collaborate easily by taking advantage of a carefully crafted Figma file.

Great Developer Experience

Don't worry about class names, just use the Visual Studio Code code snippets.

You can take advantage of autocomplete and also access the entire documentation right from your code editor.



Enhanced Accessibility

All accent colors are tested not only against the WCAG 2.1 Level AA spec, but also WCAG Level AAA, which requires a contrast ratio of at least 7:1. This gives you the best readability possible.



Aesthetically Pleasing

Gradients are a surprisingly versatile tool. They can introduce depth and dimension to your app. By using one of our well-designed gradients, you can subconsciously lead users toward the focal point.




Appealing Typography

Good legibility is crucial to make sure the users can do their job well and with as little fatigue as possible. You can choose between different monospaced, serif, and sans-serif fonts.

Cassio Zen
As someone who is pretty decent at CSS but prefers to do something else, Dracula UI lets me be productive, have fun doing what I like while creating some gorgeous-looking UIs.

Cassio Zen

Software Engineer at Microsoft

Join the Dark Side

Get early access to dozens of components and start building gorgeous dark sites today.

Complete Package


  • High-quality Components
  • Unlimited Projects
  • Lifetime Updates
  • Figma Design System
  • Discord Community

30 days refund (no Q/A)

Frequently Asked Questions

Why is this "early access"?

Our goal is to build something special, so instead of waiting months to release this, we decided to offer an early access version that will allow you to give feedback and shape the future of this project.

Is this a yearly subscription?

No, Dracula UI includes lifetime access to all our components and patterns. This means that you'll receive free updates every time we build something new.

What can I do with this license?

You can use this to build almost anything, including your own commercial projects, client projects, or open source projects. The only restriction we have is creating derivative competing products.

What kind of support do I get?

You'll get access to a private GitHub repository where you can report bugs and get help with usage questions. You'll also get access to a private Discord with other Dracula UI users.

Is there a light theme included?

At this point Dracula UI is 100% focused on dark mode apps. Although vampires can't stand the light, we're open to the possibility of adding a light color palette in the future.

What is your refund policy?

If you're unhappy with Dracula UI for some reason, feel free to email me at zeno@draculatheme.com within 30 days and I'll fully refund you, no questions asked.


Hey, I'm Zeno

I'm obsessed with dark mode and re-usable components. I started building UI libraries back in 2012 using jQuery and YUI.

A year later, I designed my own dark theme, Dracula, which became a widely adopted color scheme among top developers.

Now, I'm building the ultimate collection of dark UI components. I'm so excited to help you build your own apps faster!

// Los Angeles, CA


And I'm Netto

I love building tools to empower engineers to build things faster and more reliably.

On my day to day job at Segment (Twilio), I write JavaScript code that runs on billions of devices every single day.

I'm always looking for creative ways to build great experiences on the web and I can't wait to see what you're going to create with this package.

// Austin, TX