dracula-ui
dracula-ui
npm i dracula-ui
dracula-ui

dracula-ui

πŸ§›β€β™€οΈ A dark-first collection of UI patterns and components.

by dracula

1.0.3 (see all)License:MITTypeScript:Built-In
npm i dracula-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.

πŸ“– 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"
/>

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

Downloads/wk

81

GitHub Stars

475

LAST COMMIT

2mos ago

MAINTAINERS

2

CONTRIBUTORS

10

OPEN ISSUES

8

OPEN PRs

0
VersionTagPublished
1.0.3
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate