Deez-components NPM

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,
    },
  },
},