Components

Launchpad Next includes a collection of reusable, production-ready components designed to help you build and launch faster.

All components are built with:

• Next.js
• TypeScript
• Tailwind CSS
• Motion
• Accessibility best practices

Components are designed to be reusable, customizable, and easy to extend.

Component Structure

Components are organized inside the components/ directory.

Example:

components/
├── ui/
├── marketing/
├── seo/
├── blog/
└── dashboard/

UI Components

Location:

components/ui

Reusable interface primitives used throughout the project.

Examples:

Button
Input
Textarea
Badge
Card
Avatar
Dialog

These components are intended to be used across multiple pages and features.

Marketing Components

Location:

components/marketing

Components used for landing pages and marketing websites.

Examples:

Hero
FeatureTabs
PricingTable
Testimonials
CTASection
LogoCloud

SEO Components

Location:

components/seo

SEO-related utilities and components.

Examples:

StructuredData

Importing Components

Use standard imports:

import Button from "@/components/ui/button";

import Hero from "@/components/marketing/hero";

Button Component

The Button component is the primary action component used throughout Launchpad Next.

Basic Usage

<Button>
  Get Started
</Button>

Variants

Example:

<Button variant="primary">
  Get Started
</Button>
 
<Button variant="secondary">
  Learn More
</Button>
 
<Button variant="outline">
  View Demo
</Button>

Available variants may vary depending on your template version.

Sizes

<Button size="sm">
  Small
</Button>
 
<Button size="md">
  Medium
</Button>
 
<Button size="lg">
  Large
</Button>

Loading State

<Button loading>
  Saving...
</Button>

Position the loading indicator:

<Button
  loading
  loadingPosition="left"
>
  Saving...
</Button>

Buttons with Icons

Launchpad Next uses Lucide React icons.

import { ArrowRight } from "lucide-react";
 
<Button>
  Get Started
  <ArrowRight />
</Button>

Feature Components

Feature components help showcase product capabilities.

Example:

<FeatureTabs
  items={features}
/>

Content is typically provided through the content/ layer.

Example:

import { HOME_PAGE } from "@/content/marketing/home";
 
<FeatureTabs
  items={HOME_PAGE.features}
/>

Pricing Components

Pricing components are designed to display plans, features, and comparisons.

Example:

<PricingTable
  plans={plans}
  features={features}
/>

Content should come from:

content/marketing/pricing.ts

Hero Components

Hero sections are used at the top of landing pages.

Example:

<Hero
  title={hero.title}
  description={hero.description}
  primaryCta={hero.primaryCta}
  secondaryCta={hero.secondaryCta}
/>

Hero content should be managed through:

content/marketing/home.ts

Animation Components

Launchpad Next includes reusable animation utilities.

Location:

components/ui/animations

FadeIn

Use FadeIn for section-level animations.

Preferred:

<FadeIn as="section">
  <Hero />
</FadeIn>

FadeIn provides consistent entrance animations throughout the project.

Customizing Components

Most components support customization through props.

Example:

<Button
  variant="primary"
  size="lg"
>
  Get Started
</Button>

<Hero
  title="Launch Faster"
  description="Build your next SaaS."
/>

Avoid editing component internals unless necessary.

Content-Driven Components

Launchpad Next follows a content-driven architecture.

Preferred:

import { HOME_PAGE } from "@/content/marketing/home";
 
<Hero
  title={HOME_PAGE.hero.title}
  description={HOME_PAGE.hero.description}
/>

Avoid:

<Hero
  title="Launch Faster"
  description="Build your next SaaS."
/>

Hardcoded content makes future updates more difficult.

Best Practices

Reuse Existing Components

Before creating a new component:

1. Search the components/ directory.
2. Reuse existing components.
3. Extend existing components when possible.

Avoid duplicate solutions.

Keep Components Reusable

Components should solve reusable problems.

Preferred:

Hero
PricingTable
FeatureTabs
CTASection

Avoid:

HomepageHero
PricingPageCTA
AboutPageFeatures

Use TypeScript

All components use TypeScript.

When creating custom components:

interface HeroProps {
  title: string;
  description: string;
}

Avoid using any whenever possible.

Summary

Launchpad Next templates components are designed to be:

• Reusable
• Flexible
• Accessible
• Type-safe
• Easy to customize

Use the existing component library whenever possible and keep content centralized inside the content/ directory for the best development experience.