Dracula UI

A dark-first collection of UI patterns and components.

CSS ToolkitComponent ToolkitReact
dracula/dracula-uiui.draculatheme.comdracula-ui

README

Dracula UI


A dark-first collection of UI patterns and components.


Dracula UI

:thinking: 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.

:book: Documentation


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

:package: Install


You can install Dracula UI via npm or yarn.

  1. ``` sh
  2. npm install dracula-ui

  4. yarn add dracula-ui
  5. ```

:zap: Using with HTML


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

  1. ``` html
  2. <link
  3.   rel="stylesheet"
  4.   href="node_modules/dracula-ui/styles/dracula-ui.css"
  5. />
  6. ```

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

  1. ``` html
  2. <p class="drac-text drac-text-black">Hello Vampire</p>
  3. ```

See full example.


:sparkles: Using with React


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

  1. ``` js
  2. import 'dracula-ui/styles/dracula-ui.css'
  3. import { Paragraph } from 'dracula-ui'

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

  9. export default App;
  10. ```

See full example.


:rocket: 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:

  1. ``` js
  2. import 'dracula-ui/styles/dracula-ui.css'

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

  8. export default MyApp
  9. ```

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

  1. ``` js
  2. import { Paragraph } from 'dracula-ui'

  4. export default function Index() {
  5.   return <Paragraph color="black">Hello Vampire</Paragraph>
  6. }
  7. ```

See full example.


:test_tube: Using with Jekyll


Go to _config.yml and include the node_modules folder:

  1. ```yaml
  2. include:
  3.   - node_modules
  4. ```

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

  1. ```scss
  2. ---
  3. ---
  4. @import "../../node_modules/dracula-ui/styles/dracula-ui.css"
  5. ```

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.

  1. ``` html
  2. <link rel="stylesheet" href="/assets/css/styles.css">
  3. ```

See full example.


:bulb: Ideas


You can suggest new ideas using GitHub Discussions.

:wave: Questions


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

:pencil2: License


MIT License © Zeno Rocha