Component Architecture

Understanding the component organization and architecture of the Founderflow Boilerplate. Learn about the component structure, patterns, and best practices.

Component Organization

1. UI Components (`components/ui/`)

Base components built on Radix UI primitives with consistent styling and behavior:

button.tsx

Button variants with multiple styles

card.tsx

Card layouts and containers

dialog.tsx

Modal dialogs and overlays

input.tsx

Form inputs and controls

table.tsx

Data tables and grids

toast.tsx

Notifications and alerts

2. Landing Components (`components/landing/`)

Marketing page components for your landing page:

Hero Sections

Multiple hero layouts for different styles

Features

Feature showcase grids and cards

Pricing

Pricing table components

Testimonials

Customer testimonials and reviews

FAQ

Accordion-style FAQs

Footer

Site footer with links and branding

3. Platform Components (`components/platform/`)

Dashboard components for your application:

Sidebar

Navigation sidebar component

Billing

Subscription management

Profile

User profile forms

Breadcrumbs

Navigation breadcrumbs

Component Patterns

Composition

Components built for reusability and flexibility

Props Interface

Strong TypeScript typing for all component props

Variants

Multiple visual variants for different use cases

Accessibility

ARIA compliance and keyboard navigation

Responsive

Mobile-first design approach

Animation

Framer Motion integration for smooth transitions

File Structure

Project Structure

NextshipBoilerplate/

├── app/

├── [locale]/

├── (auth)/

├── (guest)/

├── (legal)/

└── (platform)/

├── api/

├── (platform)/

├── payments/

├── public/

├── resend/

├── stripe/

└── webhook/

└── globals.css

├── components/

├── admin/

├── auth/

├── blog/

├── buttons/

├── comparison/

├── landing/

├── hero/

├── features/

├── pricing/

├── testimonial/

└── footer/

├── payments/

├── platform/

└── ui/

├── lib/

├── config/

├── email-templates/

├── utils/

├── db.ts

├── stripe.ts

├── lemonsqueezy.ts

└── utils.ts

├── models/

├── hooks/

├── types/

├── locales/

├── public/

├── docs/

└── examples/

Best Practices

Component Naming

Use descriptive, PascalCase names that clearly indicate the component's purpose.

✓ Good: UserProfileCard, PaymentForm, NavigationMenu

✗ Bad: Card, Form, Menu

Props Interface

Always define TypeScript interfaces for component props.

interface ButtonProps {

variant?: 'primary' | 'secondary';

size?: 'sm' | 'md' | 'lg';

onClick?: () => void;

}

File Organization

Group related components in logical directories and use index files for clean imports.

components/

ui/

index.ts

button.tsx

card.tsx

Next Steps

Now that you understand the component architecture, explore these related areas:

API Routes

Learn about the API structure and how components interact with backend services.

Styling & UI

Understand the design system and how to customize component styles.