UI Components

Explore the building blocks of your site. Click a component to see its full tutorial.

Button Component

Buttons are used for actions. Here are some common variants:

<button className="px-4 py-2 bg-white text-black rounded-lg border border-white hover:bg-black hover:text-white transition-colors">Primary</button>
<button className="px-4 py-2 bg-black text-white border border-white rounded-lg hover:bg-white hover:text-black transition-colors">Outline</button>
<button className="px-4 py-2 bg-transparent text-white border border-white rounded-lg hover:bg-white hover:text-black transition-colors">Ghost</button>
<button className="px-4 py-2 bg-white text-black rounded-full border border-white hover:bg-black hover:text-white transition-colors">Pill</button>
tsx

Card Component

Cards are flexible containers for content. Here's a basic card and a card with an image:

<div className="p-6 bg-black text-white rounded-lg border border-white max-w-xs">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-white/70 mb-4">This is a sample card component with header, content, and footer.</p>
  <button className="px-4 py-2 bg-white text-black rounded-lg border border-white hover:bg-black hover:text-white transition-colors">Button</button>
</div>
tsx
Sample

Card with Image

This card includes an image, title, and description.

<div className="max-w-xs rounded-lg border border-white overflow-hidden bg-black text-white">
  <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" alt="Sample" className="w-full h-32 object-cover" />
  <div className="p-4">
    <h3 className="text-lg font-semibold mb-2">Card with Image</h3>
    <p className="text-white/70 mb-4">This card includes an image, title, and description.</p>
    <button className="px-4 py-2 bg-white text-black rounded-lg border border-white hover:bg-black hover:text-white transition-colors">Action</button>
  </div>
</div>
tsx

Theme Toggle

Let users switch between dark and light mode easily.

import { useTheme } from 'next-themes';
import { Moon, Sun } from 'lucide-react';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="px-4 py-2 rounded-lg border border-white font-semibold transition-colors duration-200 bg-black text-white dark:bg-white dark:text-black"
    >
      {theme === 'dark' ? <Sun className="inline h-5 w-5" /> : <Moon className="inline h-5 w-5" />}
      {theme === 'dark' ? ' Light Mode' : ' Dark Mode'}
    </button>
  );
}
tsx

Navbar

A responsive navigation bar for your site.

export function Navbar() {
  return (
    <nav className="w-full flex items-center justify-between px-6 py-3 border-b border-white bg-black text-white">
      <span className="font-bold text-lg">Logo</span>
      <div className="flex gap-6">
        <a href="#" className="hover:underline">Home</a>
        <a href="#" className="hover:underline">About</a>
        <a href="#" className="hover:underline">Contact</a>
      </div>
    </nav>
  );
}
tsx