Installation & Setup

Velocify UI is build on various dependencies. In order to use the components, you need to install the dependencies.

Tailwind CSS

Tailwind CSS is used for styling the components. You can check the documentation here. Follow the instructions and install the dependencies.

npm install -D tailwindcss
npx tailwindcss init

Class Variance Authority

CVA is used for handling the variants of the components. You can check the documentation here.

npm install class-variance-authority

Tailwind Merge

Tailwind Merge is used for merging the variants of the components. You can check the documentation here.

npm install tailwind-merge

Tailwind CSS Configuration

In order to use the components, you need to configure the tailwind.config.ts file. You can check the documentation here. For out set up, you need to add the following to your tailwind.config.ts file:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        paragraph: {
          primary: "#c2c8d1",
          secondary: "#9ca3af",
        },
        accent: {
          primary: "#F8CC38",
          secondary: "#F8CC38",
        },
        dark: {
          primary: "#111827",
          secondary: "#1F2937",
        },
        gray:{
          light: "#F3F4F6",
          dark: "#4B5563",
        },
        light: {
          primary: "#E5E7EB",
          secondary: "#D1D5DB",
        },
        warning: {
          primary: "#EAB308",
          secondary: "#FDE047",
          hover: "#FACC15",
        },
        success: {
          primary: "#22C55E",
          secondary: "#86EFAC",
          hover: "#4ADE80",
        },
        info: {
          primary: "#3B82F6",
          secondary: "#93C5FD",
          hover: "#60A5FA",
        },
        error: {
          primary: "#EF4444",
          secondary: "#FCA5A5",
          hover: "#F87171",
        },
        link: {
          primary: "#1D4ED8"
        },
        darkBG: "#030711",
        lightBG: "#FFFFFF",
      },
    },
  },
  plugins: [],
};
export default config;

This is where you can add your own custom colors and extend the theme.

Add Components

You can simply add the components to your project by copying the code from the documentation and pasting it into your project. Check out all the components here.