Building Components
Create reusable building blocks for your website
What You'll Learn
A component is a reusable piece of your website. Instead of building each page from scratch, you build components once and use them everywhere.
Component Categories
| Category | Purpose | Examples |
|---|---|---|
| Layout | Structure the page | Section, Container |
| UI | Interactive elements | Button, Card, CTA |
| Feature | Specific functionality | Hero, ProcessStepper |
| Page | Full page compositions | Homepage, Services |
The Component Hierarchy
Components build on each other:
Page
├── Section (layout)
│ ├── Container (layout)
│ │ ├── Heading (UI)
│ │ ├── Paragraph (UI)
│ │ └── Button (UI)
Deliverable: Create Section Component
Purpose: Build a reusable section wrapper with consistent spacing.
Expert Role: React Component Developer
Tools to Use: File system (write components/Section.tsx)
Expected Output
- TypeScript component with variant props
- GSAP scroll animations with reduced motion support
Prompt Template
Act as a React component developer. Create a Section component:
- Provides consistent vertical padding
- Has variants: default, large, small
- Has background options: white, alt, green (dark)
- Includes scroll-triggered reveal animation
- Respects prefers-reduced-motion
Put it in components/Section.tsx with TypeScript types.
Show me how to use it with examples.
Deliverable: Create Container Component
Purpose: Constrain content width consistently.
Expert Role: React Component Developer
Tools to Use: File system (write components/Container.tsx)
Expected Output
- TypeScript component with width variants
- Consistent padding and centering
Prompt Template
Act as a React component developer. Create a Container component:
- Constrains content width with max-width
- Has variants: content (1000px), wide (1200px), reading (680px)
- Centers content with auto margins
- Adds horizontal padding
Put it in components/Container.tsx with TypeScript types.
Deliverable: Create Button Component
Purpose: Build an accessible button with all variants.
Expert Role: UI Component Specialist with Accessibility Expertise
Tools to Use: File system (write components/Button.tsx)
Expected Output
- Accessible button with all variants
- Loading and disabled states
- Focus management
Prompt Template
Act as a UI component specialist with accessibility expertise.
Create a Button component with variants:
- primary: Dark background, white text
- secondary: Transparent with border
- ghost: No background, text only
Include:
- Hover and focus states
- Disabled state
- Loading state with spinner
- Proper accessibility (focus ring, aria labels)
Put it in components/Button.tsx with TypeScript types.
Deliverable: Create Hero Component
Purpose: Build a cinematic hero section for page headers.
Expert Role: Senior Frontend Developer with Animation Expertise
Tools to Use: File system (write), Context7 MCP (GSAP patterns)
Expected Output
- Cinematic hero with Ken Burns effect
- Staggered text animations
- Gradient overlay for readability
Prompt Template
Act as a senior frontend developer with animation expertise.
Create a Hero component for the top of pages with:
- Full-width background (image or color)
- Eyebrow text (small caps label above headline)
- Large headline (H1)
- Subheadline paragraph
- One or two CTA buttons
- Gradient overlay on images for text readability
- Ken Burns effect on background image (slow zoom)
- Staggered entrance animations
Make it dramatic and cinematic feeling.
Put it in components/Hero.tsx with TypeScript types.