veilui

VeilUI is a versatile UI component library for React that provides stylish and flexible components to enhance your web applications.

VeilUI full documentation ~ clxakz.github.io/veilui

Installation

Install VeilUI using npm

npm install veilui@latest

Setup TailwindCSS

After installing VeilUI, you'll need to set up Tailwindcss in your project. Follow the official guide to configure Tailwind with Vite.

After intalling Tailwindcss, edit tailwind.config.js as following:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/veilui/**/*.js'], // <-- Make sure VeilUI is exposed to tailwinds config
  theme: {
    extend: {
      colors: {
        primary: '#18181b', // Zinc 900
        secondary: '#27272a', // Zinc 800
      },

      fontFamily: {
        sans: ['Roboto', 'sans-serif'], // Using a custom font is optional
      },
    },
  },
  plugins: [],
};

These will be the base colors for all available components. You can create your own themes by using Tailwindcss-themer and following this guide.