Installation

Installing Tailwind CSS

To integrate Tailwind CSS into your Next.js app, follow the installation steps outlined in the Tailwind CSS documentation for Next.js (opens in a new tab).

Installing Avishka-UI

You need to install Avishka-UI, and you can do so using npm, yarn, or pnpm.

# npm
npm install avishka-ui
 
# yarn
yarn add avishka-ui
 
# pnpm
pnpm install avishka-ui

Configuring for a Next.js 14 App

To set up a Next.js 14 app, start by configuring your tailwind.config.js file with the following additions.

tailwind.confing.js

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
   "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    "./node_modules/avishk-ui/dist/**/*.{js,ts}",
  ],
  theme: {
    extend: {
      colors: {
        btn: {
          primary: {
            DEFAULT: "#000",
            foreground: "#fff",
          },
 
          secondary: {
            DEFAULT: "#f4f4f5",
            foreground: "#000",
          },
          danger: {
            DEFAULT: "#ef4444",
            foreground: "#fff",
          },
 
          disabled: {
            DEFAULT: "#d3d3d3",
            foreground: "#808080",
          },
        },
        badge: {
          primary: {
            DEFAULT: "#000",
            foreground: "#fff",
          },
 
          secondary: {
            DEFAULT: "#f4f4f5",
            foreground: "#000",
          },
          danger: {
            DEFAULT: "#ef4444",
            foreground: "#fff",
          },
        },
 
        alert: {
          primary: {
            DEFAULT: "#fff",
            foreground: "#fff",
          },
 
          danger: {
            DEFAULT: "#ef4444",
            foreground: "#ef4444",
          },
        },
 
        avatar: {
          primary: {
            DEFAULT: "#fff",
            foreground: "#000",
          },
        },
 
        card: {
          DEFAULT: "#fff",
          foreground: "#000",
        },
      },
    },
  },
  plugins: [],
};
 
export default config

install Vite