Skip to Content
ClientComponentsComponents Overview

Components Overview

Fast Forward Dev includes a comprehensive set of pre-built, customizable React components to help you build your application quickly. All components are built with TypeScript, Tailwind CSS, and DaisyUI.

Component Categories

Landing Page Components

  • Hero - Main hero section with headline, description, and CTA
  • Pricing - Pricing tables with Stripe integration
  • FAQ - Accordion-style FAQ section
  • Pros - Features/benefits showcase
  • WithOrWithout - Before/after comparison
  • MadeWith - Tech stack showcase
  • CTA - Call-to-action sections
  • Header - Top navigation bar with responsive menu
  • Footer - Site footer with links

Interactive Components

  • Buttons - Various button types (CTA, Login, Pricing, etc.)

Admin Components

  • Admin Dashboard - User management components
    • UserDetailCard
    • BillingDetailsCard
    • StatsCard
    • ModalEditUser
    • ModalDeleteUser
    • IdentityProvidersList

About Components

  • About - Full about section
  • AboutShort - Condensed about section

Component Structure

All components follow a consistent structure:

'use client' // Only if needed for interactivity
 
import React from 'react'
// ... other imports
 
const ComponentName: React.FC = () => {
  // Configurable variables at the top
  const title = 'My Title'
  const description = 'My description'
  
  // Component logic
  
  return (
    <section className="...">
      {/* JSX */}
    </section>
  )
}
 
// Helper functions below component
function helperFunction() {
  // ...
}
 
export default ComponentName

Design Principles

Customization First

Components are designed to be easily customizable:

  • Variables at the top - Key values are defined as variables for easy modification
  • Inline comments - Guidance on what each variable does
  • Flexible styling - Tailwind classes can be easily adjusted
  • No prop drilling - Most components don’t require props, reducing complexity

Responsive by Default

All components are mobile-first and responsive:

  • Work on all screen sizes
  • Use Tailwind’s responsive prefixes (sm:, md:, lg:, xl:)
  • Touch-friendly on mobile devices

DaisyUI Integration

Components leverage DaisyUI for:

  • Semantic class names (btn, card, badge)
  • Theme support (light/dark mode)
  • Consistent styling
  • Accessibility features

Usage Patterns

Basic Usage

Most components can be imported and used directly:

app/page.tsx
import Hero from '@/components/Hero/Hero'
import Pricing from '@/components/Pricing/Pricing'
import FAQ from '@/components/FAQ/FAQ'
 
export default function Home() {
  return (
    <>
      <Hero />
      <Pricing />
      <FAQ />
    </>
  )
}

Customization

Open the component file and modify variables:

components/Hero/Hero.tsx
const Hero: React.FC = () => {
  // Change these values
  const heroImage = '/my-image.png'
  const description = 'My custom description'
  const checkList = ['Feature 1', 'Feature 2', 'Feature 3']
  
  // ...
}

Most customization happens by editing the component file directly, not through props. This makes the code simpler and easier to understand.

Styling Components

Using Tailwind Classes

<div className="flex items-center gap-4 p-6 rounded-lg bg-base-100">
  <h1 className="text-2xl font-bold">Hello</h1>
</div>

Using DaisyUI Classes

<button className="btn btn-primary">
  Click me
</button>
 
<div className="card bg-base-100 shadow-xl">
  <div className="card-body">
    <h2 className="card-title">Card Title</h2>
  </div>
</div>

Responsive Design

<div className="
  flex flex-col        /* Mobile: column */
  md:flex-row          /* Tablet: row */
  lg:gap-8             /* Desktop: larger gap */
  xl:max-w-7xl         /* Extra large: max width */
">
  {/* Content */}
</div>

Component Categories Explained

Server Components vs Client Components

Server Components (default):

  • No 'use client' directive
  • Rendered on the server
  • Better for SEO and performance
  • Cannot use hooks or browser APIs

Client Components:

  • Have 'use client' directive
  • Rendered in the browser
  • Can use hooks (useState, useEffect)
  • Required for interactivity

Only add 'use client' when necessary. Most components should be Server Components.

Layout Components

Components that structure your pages:

  • Header
  • Footer
  • Navigation
  • Containers

Content Components

Components that display content:

  • Hero
  • About
  • Features
  • Testimonials

Interactive Components

Components that require user interaction:

  • Buttons
  • Forms
  • Modals
  • Accordions

Integration Components

Components that integrate with external services:

  • Pricing (Stripe)
  • Authentication (NextAuth)
  • Email forms

Common Patterns

Section Wrapper

Most components use a consistent section wrapper:

<section className="py-20 bg-base-100" id="section-name">
  <div className="max-w-7xl mx-auto px-4">
    {/* Content */}
  </div>
</section>
  • py-20 - Vertical padding
  • bg-base-100 - Background color from theme
  • id - For anchor links
  • max-w-7xl mx-auto - Centered with max width
  • px-4 - Horizontal padding

Responsive Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  {/* Items */}
</div>
  • Mobile: 1 column
  • Tablet: 2 columns
  • Desktop: 3 columns
  • gap-8 - Space between items

Conditional Rendering

{showElement && (
  <div>Element content</div>
)}
 
{items.map((item) => (
  <div key={item.id}>{item.name}</div>
))}

Best Practices

1. Keep Components Simple

  • One component, one responsibility
  • Extract complex logic into helper functions
  • Use composition over complexity

2. Use TypeScript

type ComponentProps = {
  title: string
  description?: string  // Optional
}
 
const Component: React.FC<ComponentProps> = ({ title, description }) => {
  // ...
}

3. Follow Naming Conventions

  • Components: PascalCase (HeroSection.tsx)
  • Files: Match component name
  • Props: camelCase
  • CSS classes: Tailwind utilities

4. Accessibility

  • Use semantic HTML (<button>, <nav>, <section>)
  • Add ARIA labels where needed
  • Ensure keyboard navigation works
  • Test with screen readers

5. Performance

  • Use Next.js Image component for images
  • Lazy load heavy components
  • Minimize client-side JavaScript
  • Use Server Components when possible

Customization Guide

Changing Colors

Colors come from your DaisyUI theme:

// Primary color
<button className="btn btn-primary">Button</button>
 
// Secondary color
<div className="bg-secondary text-secondary-content">Content</div>
 
// Neutral colors
<section className="bg-neutral text-neutral-content">Section</section>

Changing Fonts

Fonts are configured in tailwind.config.ts:

tailwind.config.ts
theme: {
  extend: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
}

Changing Spacing

Use Tailwind’s spacing scale:

<div className="
  p-4      /* padding: 1rem */
  m-8      /* margin: 2rem */
  gap-6    /* gap: 1.5rem */
">

Component Dependencies

Most components have minimal dependencies:

  • React - Core library
  • Next.js - Framework features (Link, Image)
  • Tailwind CSS - Styling
  • DaisyUI - Component styles
  • React Icons - Icon library

Some components have additional dependencies:

  • Pricing - Stripe integration
  • Admin - TanStack Query for data fetching
  • Blog - React Markdown, Gray Matter

Next Steps

Explore individual component documentation:

Or learn about:

Last updated on
Hero ComponentPricing Component