dracula / dracula-ui

:vampire: A dark-first collection of UI patterns and components.

🚧 Dracula UI is no longer maintained. Read announcement.

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

dracula-ui's Issues

Fix code block horizontal navigation

Local run not working on Windows

I want to access the documentation, but following the README steps localhost:3000 didn't worked.

I have tried on Windows using Ubuntu-20.04 through WSL 2.

Fix Tab behavior

Some colors are not being generated correctly

Looks like the colors defined on this each statement are not being generated correctly.

https://github.com/dracula/dracula-ui/blob/master/src/styles/colors.css#L52-L60

Here's the compiled CSS:

Document CSS variables usage

Link

I recommend changing the Link component to another name because it may conflict with NEXT / LINK
My suggestion "DracLink " hahahahah

Standardize default color

Currently out of standard:

• Anchor (purple / hover)
• Avatar (green)
• Badge (purple)
• Button (green)

Input not recognizing type prop

Hi guys,

We are trying to use the inputs with different types, like password etc, there is one specific reason for not come with type property?

Fix multi-line linear gradients on Safari

Move Gumroad API to live website

Fix Anchor documentation description

Fix Fira Code missing

Make Radio components checked by default in the documentation

Create <Kdb> component

Render a <kdb> tag with OS detection. For example:

<Kdb osx="⇧⌘P" win="Ctrl+Shift+P" />

Error when using <Anchor> inside <Link>

Related: vercel/next.js#7915

Remove all extraneous DOM properties

i.e. make sure HTML elements only receive:

• Actual Dracula UI component props
• Any valid HTML prop

We shouldn't see something like hoverColor show up in an a tag though.

Adding color prop to Avatar sets backround

If you add a color to the Avatar component it sets a background on the Avatar element that clears the image in it.
Version: 0.8.0

// Not working
<Avatar
    src="/avatar.jpg"
    color="cyanGreen"
/>

Fix Tab click area

Unable to use <Button as="input" />

I'm getting the following error when creating a test with <Button as="input" />.

 FAIL  src/components/Button/__tests__/Button.test.tsx (22.277 s)
  ● Console

    console.error
      The above error occurred in the <input> component:
      
          at input
          at Button (/Users/zeno/Projects/dracula-ui/src/components/Button/Button.tsx:62:71)
          at div
          at WrapperComponent (/Users/zeno/Projects/dracula-ui/node_modules/enzyme-adapter-utils/src/createMountWrapper.jsx:49:26)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)

Add accent color CSS variable

Try to access "Spacing" breaks the build

There are 2 "Spacing" links (under "Getting Started" and "Components"); both break the build when accessed, showing a "Module not found" error.

I'm on Windows using Ubuntu-20.04 through WSL 2.

Installation failed: Conflicting peer dependency

I have fresh next.js setup with tailwindcss and it is producing conflict. I tried to install it with --force and --legacy-peer-deps but then it doesn't seem to install anything.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^8.2.8" from the root project
npm ERR!   peer postcss@"^8.1.0" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^10.2.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev jest-transform-css@"^2.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/postcss
npm ERR!   peer postcss@"^7.0.2" from [email protected]
npm ERR!   node_modules/jest-transform-css
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Implement responsive navigation

Replace TSDX

Fix demo contrast

Add LICENSE

Checklist

• https://github.com/dracula/dracula-ui/blob/master/package.json#L4
• https://github.com/dracula/dracula-ui/blob/master/website/package.json#L10

Add Avatar sizes

• xs: 30x30
• sm: 60x60
• md: 90x90
• lg: 120x120
• xl: 150x150
• 2xl: 180x180

Button component missing cursor: pointer

Hello! Not sure if this was intentional, but I noticed that the Button doesn't have a definition for the css rule cursor to make it look as a pointer.

Document Colors

Suggestion: mnemonic CSS classes

Description

IMHO, you can consider to use a mnemonic classes, such as:

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

Insteaf of:

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

Why I'm telling this, IMHO it's easier to remember, write and you'll remember the Dracula UI faster with the d-.

The .drac-anchor class is overriding the color passed in the Anchor element

When I try to apply some color to the Anchor element, it doesn't work. It keeps in purple color because .drac-anchor is overriding.

I'm using Next.js with the recommended settings.

For example, the problem happens with the colors white and pink.

Deploy site to remote address

Implement hover effect for Tabs

Our Tabs are currently too static, we should make it more fun by adding hover transitions.

Decrease package size

Source: BundlePhobia

Fix duplicated "Spacing" entry on the sidebar

Add search launcher

Initial idea: use lunr.js

Standardize size attribute

Today we have different notations for the same attribute.

Heading

<Heading size="heading-1">

Spacing

<Box m="sm" />

Button / Anchor / etc

<Button size="xsmall">

My suggestion is to follow the same shorthand pattern (xs, sm, lg, etc).

Add copy to clipboard

Problem with site responsiveness

The documentation site does not behave as expected on screens with lower resolution.

This screenshot was taken on a notebook running Windows 10, at the native resolution of 1366x768, using the Google Chrome browser.

Select Disabled doesn't work

Hi there,

When I pass this prop, the component still clickable and I can select an option. Also the styles doesn't change.

Maybe passing this prop to select will work.

I tried to fork it and change here but it is not allowed yet.

Tailwind Version of Dracula UI

I would love if there is some sort of a Tailwind compatible version of Dracula UI — so that it would be possible to do things like sm:drac-text-sm lg:drac-text-lg among other things.

Ideally, it should be like adding some custom config to tailwind.config.js, which would auto generate all the drac-* classes.

I would also try to come up with something similar to this, I think this is straightforward to achieve for every type of class other than those with gradients. Would have to do some hacking for gradients to work with Tailwind.

Fix FOUC on Topbar when navigating in production

Select disable prop is not working

Hi there,

When I pass this prop, the component still clickable and I can select an option. Also the styles doesn't change.

Transform <code> styling into its own component

Reason: universal styling can conflict with the consumer's application.

https://github.com/dracula/dracula-ui/blob/master/src/styles/typography.css#L35-L41

Catalog all CSS classes

CSS Autocomplete

We would like to be able to autocomplete css classes based on the generated stylesheet.

Include different sizes

• Button
• Select
• Input

Improve syntax code formatting

Fix navigation state

Document Spacing