🚧 Dracula UI is no longer maintained. Read announcement.

A dark-first collection of UI patterns and components.

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.

Our mission is to unleash the creative potential in every developer. We do that by providing modular components that can be used to build modern sites faster.

You can access the documentation at: ui.draculatheme.com

You can install Dracula UI via npm or yarn.

npm install dracula-ui

yarn add dracula-ui

You can use Dracula UI with plain HTML by importing the CSS file.

<link rel="stylesheet" href="node_modules/dracula-ui/styles/dracula-ui.css" />

Or by importing it on your main JavaScript file (when using a tool like Vite, for example).

import 'dracula-ui/styles/dracula-ui.css'

You can also import Dracula UI via npm's unpkg CDN:

<link
  rel="stylesheet"
  href="https://unpkg.com/dracula-ui@1.0.3/styles/dracula-ui.css"
/>

Now you can take advantage of all the classes, for example:

<p class="drac-text drac-text-black">Hello Vampire</p>

See full example.

You can also use Dracula UI with React by importing the JS package.

import 'dracula-ui/styles/dracula-ui.css'
import { Paragraph } from 'dracula-ui'

function App() {
  return <Paragraph color="black">Hello Vampire</Paragraph>
}

export default App;

See full example.

First, you need to import the CSS globally.

Go to pages/_app.js (or create this file if it doesn't exist yet) and add the CSS import:

import 'dracula-ui/styles/dracula-ui.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Then you can import Dracula UI and use all React components.

import { Paragraph } from 'dracula-ui'

export default function Index() {
  return <Paragraph color="black">Hello Vampire</Paragraph>
}

See full example.

Go to _config.yml and include the node_modules folder:

include:
  - node_modules

Create a Sass file at assets/css/styles.scss with the following content:

---
---
@import "../../node_modules/dracula-ui/styles/dracula-ui.css"

The empty front matter at the top tells Jekyll it needs to process the Dracula UI file.

Finally, include the compiled CSS file into your _layouts.

<link rel="stylesheet" href="/assets/css/styles.css">

See full example.

You can suggest new ideas using GitHub Discussions.

If you find a problem, feel free to open new GitHub Issues.

MIT License © Zeno Rocha