Documentation

Everything you need to know about using TonuComponent

Next.js Setup Guide

Project Structure

For Next.js projects using the App Router:

app/
├── components/
│   └── ui/           # TonuComponent components
├── layout.tsx
└── page.tsx

Important: Client Components

Many TonuComponent components use interactivity (state, events, etc.) and need to be client components in Next.js.

Add `'use client';` at the top of component files that use:

  • `useState`, `useEffect`, or other hooks
  • Event handlers (onClick, onChange, etc.)
  • Browser APIs

    • Example:

    tsx
    'use client';

import { useState } from 'react';

export function InteractiveButton() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

    Server Components

    Components that don't need interactivity can remain server components (no `'use client'` directive).

    Tailwind in Next.js

    Next.js 13+ with Tailwind is pre-configured. Just ensure your `tailwind.config.ts` includes:

    ts
    import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
export default config