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>
β¨ 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;
π 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>
}
π§ͺ 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">
π‘ 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