Architecture – Components

Breaking down your UI into reusable, manageable pieces

What Are Components?

Components are reusable pieces of UI that you can use to make your page.tsx files smaller and more organized. Think of them as LEGO blocks for your website.

Instead of writing all your UI code in one big page file, you break it down into smaller, manageable components that can be reused anywhere.

Why Use Components?

For example, if you have a landing page with 6 sections, an email input for signup, a button, and a navigation bar... You can create a component for each of these.

Benefits of Components

Smaller files: Makes your pages shorter, which helps AI work better and faster with fewer mistakes
Reusability: Don't have to recreate a button each time a page needs one
Organization: Easier to find and edit specific parts of your UI
Maintainability: Change a component once, and it updates everywhere it's used

Component Structure Example

Instead of having all your UI in one big page.tsx file, you would break the page down into smaller components:

Landing page broken into components:

components/navigation.tsx

components/hero-section.tsx

components/features-section.tsx

components/testimonials-section.tsx

components/email-signup.tsx

components/button.tsx

components/footer.tsx

Then in your page.tsx, you would import and use these components like building blocks.

Types of Components

🧩 UI Components

Basic building blocks that handle appearance and interaction:

Buttons, forms, cards, modals
Navigation bars, footers
Icons, images, avatars

📄 Layout Components

Components that organize and structure your content:

Headers, sidebars, main content areas
Grid systems, containers
Page sections, wrappers

🔧 Feature Components

Components that handle specific functionality:

Login forms, shopping carts
Search bars, filters
Data displays, charts

Organizing Components

Folder Structure

Components are typically stored in a components folder in your project:

Recommended structure:

components/
├── ui/                    // Basic UI components
│   ├── button.tsx
│   ├── input.tsx
│   └── modal.tsx
├── layout/               // Layout components
│   ├── header.tsx
│   ├── sidebar.tsx
│   └── footer.tsx
└── features/             // Feature-specific components
    ├── auth/
    │   ├── login-form.tsx
    │   └── signup-form.tsx
    └── blog/
        ├── post-card.tsx
        └── post-list.tsx

Component Best Practices

✅ Do This

Keep components small and focused on one thing
Use descriptive names (e.g., ProductCard not Card)
Make components reusable with props
Group related components in folders
Extract repeated UI into components

❌ Avoid This

Don't make components too large or complex
Don't hardcode values that could be props
Don't duplicate similar components
Don't mix styling with business logic

🎯 When to Create a Component

When you're repeating the same UI in multiple places
When a section of your page is getting too complex
When you want to isolate a specific piece of functionality
When AI suggests breaking something into components

Components and AI

When working with AI to create or modify components:

💡 AI Tips for Components:

Ask AI to "break this page into smaller components"
Be specific about which component you want to modify
Provide the file path when asking for changes
Ask AI to explain how components work together

Example prompt: "Create a reusable Button component in /components/ui/button.tsx that accepts different sizes and colors as props"