Installation

Prerequisites

Before using TonuComponent, make sure you have:

Setting Up Your Project

For React Projects

# Create a new React project
npx create-react-app my-app
cd my-app

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your `tailwind.config.js`:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

For Next.js Projects

# Create a new Next.js project
npx create-next-app@latest my-app
cd my-app

Next.js 13+ comes with Tailwind CSS pre-configured when you select it during setup.

Using Components

Most components don't require any installation. Simply:

1. Copy the component code

2. Create a new file in your components directory

3. Paste the code

4. Import and use it

For components with dependencies (like icons), install them:

npm install lucide-react