:vampire: A dark-first collection of UI patterns and components.
Home Page: https://ui.draculatheme.com
License: MIT License
A dark theme for SwiftUI.
All instructions can be found at draculatheme.com/swiftui.
This theme is maintained by the following person(s) and a bunch of awesome contributors.
 |
|---|
| Raphael Cerqueira |
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.
Today we have different notations for the same attribute.
<Heading size="heading-1"><Box m="sm" /><Button size="xsmall">My suggestion is to follow the same shorthand pattern (xs, sm, lg, etc).
Hi there,
When I pass this prop, the component still clickable and I can select an option. Also the styles doesn't change.
Reason: universal styling can conflict with the consumer's application.
https://github.com/dracula/dracula-ui/blob/master/src/styles/typography.css#L35-L41
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.
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.
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)
Currently out of standard:
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.
Render a <kdb> tag with OS detection. For example:
<Kdb osx="⇧⌘P" win="Ctrl+Shift+P" />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?
We would like to be able to autocomplete css classes based on the generated stylesheet.
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.
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"
/>
Related: vercel/next.js#7915
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.
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:
i.e. make sure HTML elements only receive:
We shouldn't see something like hoverColor show up in an a tag though.
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-.
I recommend changing the Link component to another name because it may conflict with NEXT / LINK
My suggestion "DracLink " hahahahah
Initial idea: use lunr.js
Source: BundlePhobia
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.
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.
Our Tabs are currently too static, we should make it more fun by adding hover transitions.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.