Dracula UI

A dark-first collection of UI patterns and components.

🤔 Why

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.

📖 Documentation

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

📦 Install

You can install Dracula UI via npm or yarn.

npm install dracula-ui

yarn add dracula-ui

⚡ Using with HTML

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/[email protected]/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.

✨ Using with React

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.

🚀 Using with Next.js

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.

🧪 Using with Jekyll

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.

💡 Ideas

You can suggest new ideas using GitHub Discussions.

👋 Questions

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

✏️ License

MIT License © Zeno Rocha