Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dracula/dracula-ui
:vampire: A dark-first collection of UI patterns and components.
https://github.com/dracula/dracula-ui
Last synced: 4 days ago
JSON representation
:vampire: A dark-first collection of UI patterns and components.
- Host: GitHub
- URL: https://github.com/dracula/dracula-ui
- Owner: dracula
- License: mit
- Archived: true
- Created: 2020-08-31T16:39:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-19T11:46:05.000Z (11 months ago)
- Last Synced: 2024-04-14T14:31:02.167Z (7 months ago)
- Language: TypeScript
- Homepage: https://ui.draculatheme.com
- Size: 59.9 MB
- Stars: 894
- Watchers: 125
- Forks: 41
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred-test - dracula/dracula-ui - :vampire: A dark-first collection of UI patterns and components. (TypeScript)
README
**🚧 Dracula UI is no longer maintained. [Read announcement](https://draculatheme.com/blog/sunsetting-dracula-ui).**
# Dracula UI
> A dark-first collection of UI patterns and components.
## :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](https://ui.draculatheme.com)
## :package: Install
You can install Dracula UI via npm or yarn.
```bash
npm install dracula-ui
yarn add dracula-ui
```
## :zap: Using with HTML
You can use Dracula UI with plain HTML by importing the CSS file.
```html
```
Or by importing it on your main JavaScript file (when using a tool like [Vite](https://vitejs.dev/), for example).
```js
import 'dracula-ui/styles/dracula-ui.css'
```
You can also import Dracula UI via npm's [unpkg CDN](https://unpkg.com):
```html
```
Now you can take advantage of all the classes, for example:
```html
Hello Vampire
```
> [See full example](https://github.com/dracula/dracula-ui/tree/main/examples/with-html).
## :sparkles: Using with React
You can also use Dracula UI with React by importing the JS package.
```js
import 'dracula-ui/styles/dracula-ui.css'
import { Paragraph } from 'dracula-ui'
function App() {
return Hello Vampire
}
export default App;
```
> [See full example](https://github.com/dracula/dracula-ui/tree/main/examples/with-react).
## :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:
```jsx
import 'dracula-ui/styles/dracula-ui.css'
function MyApp({ Component, pageProps }) {
return
}
export default MyApp
```
Then you can import Dracula UI and use all React components.
```jsx
import { Paragraph } from 'dracula-ui'
export default function Index() {
return Hello Vampire
}
```
> [See full example](https://github.com/dracula/dracula-ui/tree/main/examples/with-next).
## :test_tube: Using with Jekyll
Go to `_config.yml` and include the `node_modules` folder:
```yaml
include:
- node_modules
```
Create a Sass file at `assets/css/styles.scss` with the following content:
```scss
---
---
@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`.
```html
```
> [See full example](https://github.com/dracula/dracula-ui/tree/main/examples/with-jekyll).
## :bulb: Ideas
You can suggest new ideas using [GitHub Discussions](https://github.com/dracula/dracula-ui/discussions).
## :wave: Questions
If you find a problem, feel free to open new [GitHub Issues](https://github.com/dracula/dracula-ui/issues).
### :pencil2: License
[MIT License](https://zenorocha.mit-license.org/) © Zeno Rocha