deez-components v0.7.4
deez-components
This UI library uses Vue 3, Tailwind CSS, Headless UI, and Iconify Icons. TypeScript types are exported for all component props.
I make a lot of breaking changes to this library. I try to increment the minor version when I do, but I would NOT use these components in a production app until this hits 1.x, if that ever happens.
Project Setup
pnpm add deez-components
Make sure all peerDependencies
are installed. If you are using pnpm
>=8, they should install automatically.
pnpm add vue vue-router tailwindcss
The utility classes are not bundled with the package. After installing add the following to the content list of your tailwind.config.*
, otherwise the necessary CSS will not be generated.
content: [
...
'./node_modules/deez-components/**/*.js',
],
Your "brand" colors for primary
and danger
also need to be set in the tailwind.config.*
The following maps them to the default tailwind blue and red colors.
Instead of using different grays for text colors. This library uses opacities of 60/40/30.
So set your default black color to a dark-gray to make all text colors based off of it in light mode. Or keep the default black for maximum contrast. I prefer to keep white set to #fff
.
Set your base text colors on the <html>
element in your index.html
file.
<html class="text-black dark:text-gray-50"></html>
<html>
works better than <body>
because some components use portals, which render outside of the <body>
element.
const colors = require('tailwindcss/colors');
...
theme: {
extend: {
...
colors: {
black: colors.gray['900'],
primary: colors.blue,
danger: colors.red,
},
},
},
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago