Installation

Follow the steps below to use the components in your project.:

Step 1: Install the Nextjs App

npx create-next-app@latest

Step 2: Install Tailwind css

Terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3: Use the components


import React from 'react';
import { Button } from '@/components/Button/Button';

const ButtonDemo = () => {
  return (
    <div>
      <Button variant="primary" size="medium">Primary Button</Button>
    </div>
  );
};

export default ButtonDemo;

Get-Started With Components