Marketing

Hero sections, feature grids, pricing tables, and testimonial carousels.

Hero Section

Landing page hero with headline, subheadline, and CTA buttons.

Preview

Build faster with LaunchApp

A complete design system built on Radix UI and Tailwind CSS.

Hero Section.tsx
import { HeroSection } from "@launchapp/design-system/blocks/marketing";import { Button } from "@launchapp/design-system";export default function Page() {  return (    <HeroSection      badge="New — v2.0 released"      headline="Build faster with LaunchApp"      subheadline="A complete design system built on Radix UI and Tailwind CSS. Ship production-ready UIs in hours, not weeks."      primaryAction={<Button size="lg">Get started</Button>}      secondaryAction={<Button size="lg" variant="outline">View docs</Button>}    />  );}

Feature Grid

Grid layout showcasing product features with icons and descriptions.

Preview

Why LaunchApp?

Everything you need to ship production UIs.

Accessible

Built on Radix UI primitives for full keyboard and screen reader support.

Customizable

CSS custom properties and Tailwind for effortless theming.

TypeScript

Fully typed APIs with IntelliSense for a great DX.

Dark Mode

First-class dark mode support out of the box.

Production Ready

Battle-tested components shipped in production apps.

Open Source

MIT licensed and open for contributions.

Feature Grid.tsx
import { FeatureGrid } from "@launchapp/design-system/blocks/marketing";const features = [  {    title: "Accessible",    description: "Built on Radix UI primitives for full keyboard and screen reader support.",    icon: "♿",  },  {    title: "Customizable",    description: "CSS custom properties and Tailwind for effortless theming.",    icon: "🎨",  },  {    title: "TypeScript",    description: "Fully typed APIs with IntelliSense for a great DX.",    icon: "📘",  },  {    title: "Dark Mode",    description: "First-class dark mode support out of the box.",    icon: "🌙",  },];export default function Page() {  return <FeatureGrid features={features} title="Why LaunchApp?" />;}

Pricing Table

Pricing plans comparison table with feature lists and CTA buttons.

Preview

Simple, transparent pricing

MonthlyAnnual

Starter

$9/mo

Perfect for individuals and small projects.

  • 5 projects
  • 10 GB storage
  • Email support
Most popular

Pro

$29/mo

Best for growing teams and businesses.

  • Unlimited projects
  • 100 GB storage
  • Priority support
  • Analytics

Enterprise

Custom

For large organizations with advanced needs.

  • Unlimited everything
  • Dedicated support
  • Custom integrations
  • SLA

Simple, transparent pricing

MonthlyAnnual

Starter

$9/mo

Perfect for individuals and small projects.

  • 5 projects
  • 10 GB storage
  • Email support
Most popular

Pro

$29/mo

Best for growing teams and businesses.

  • Unlimited projects
  • 100 GB storage
  • Priority support
  • Analytics

Enterprise

Custom

For large organizations with advanced needs.

  • Unlimited everything
  • Dedicated support
  • Custom integrations
  • SLA

Simple, transparent pricing

MonthlyAnnual

Starter

$9/mo

Perfect for individuals and small projects.

  • 5 projects
  • 10 GB storage
  • Email support
Most popular

Pro

$29/mo

Best for growing teams and businesses.

  • Unlimited projects
  • 100 GB storage
  • Priority support
  • Analytics

Enterprise

Custom

For large organizations with advanced needs.

  • Unlimited everything
  • Dedicated support
  • Custom integrations
  • SLA
Pricing Table.tsx
import { PricingTable } from "@launchapp/design-system/blocks/marketing";const plans = [  {    name: "Starter",    price: "$9",    period: "/month",    description: "Perfect for individuals and small projects.",    features: ["5 projects", "10 GB storage", "Email support"],    ctaLabel: "Get started",  },  {    name: "Pro",    price: "$29",    period: "/month",    description: "Best for growing teams and businesses.",    features: ["Unlimited projects", "100 GB storage", "Priority support", "Analytics"],    ctaLabel: "Start free trial",    highlighted: true,  },  {    name: "Enterprise",    price: "Custom",    description: "For large organizations with advanced needs.",    features: ["Unlimited everything", "Dedicated support", "Custom integrations", "SLA"],    ctaLabel: "Contact sales",  },];export default function Page() {  return <PricingTable plans={plans} onSelect={(plan) => console.log(plan)} />;}

Billing Card

Pricing plan card with features list, billing period toggle, and CTA.

Preview

Pro

Active
$29
/month

Included features

  • Unlimited projects
  • 100 GB storage
  • Priority support

Next billing date: April 1, 2025

Billing Card.tsx
import { BillingCard } from "@launchapp/design-system/blocks/marketing";export default function Page() {  return (    <BillingCard      name="Pro"      price={{ monthly: 29, annual: 290 }}      description="For growing teams"      features={["Unlimited projects", "100GB storage", "Priority support", "Custom domains"]}      highlighted      ctaLabel="Get started"      onSelect={() => console.log("selected pro")}    />  );}

Changelog Timeline

Marketing-facing changelog timeline showing product updates and releases.

Preview

Changelog

Latest updates and improvements.

2.0.0

Design System v2

268 components, dark mode, and more.

Breaking
1.5.0

New Components

Added Carousel, Timeline, and Heatmap.

Feature
1.4.2

Bug Fixes

Resolved accessibility issues in Combobox.

Fix
Changelog Timeline.tsx
import { ChangelogTimeline } from "@launchapp/design-system/blocks/marketing";const entries = [  { id: "1", version: "2.0.0", date: "March 2024", title: "Design System v2", description: "268 components, dark mode, and more.", badge: "Major" },  { id: "2", version: "1.5.0", date: "January 2024", title: "New Components", description: "Added Carousel, Timeline, and Heatmap.", badge: "Feature" },];export default function Page() {  return <ChangelogTimeline entries={entries} />;}

Feature Comparison

Side-by-side feature comparison table for free vs paid tiers.

Preview

Compare plans

Choose the right plan for your team.

Compare plans

Free

$0/mo
Most popular

Pro

$29/mo

Enterprise

Custom
Projects
5UnlimitedUnlimited
Storage
5GB100GBCustom
Support
SSO
Feature Comparison.tsx
import { FeatureComparison } from "@launchapp/design-system/blocks/marketing";const features = [  { name: "Projects", free: "5", pro: "Unlimited" },  { name: "Storage", free: "5GB", pro: "100GB" },  { name: "Team members", free: "3", pro: "Unlimited" },  { name: "Priority support", free: false, pro: true },  { name: "Custom domains", free: false, pro: true },];export default function Page() {  return <FeatureComparison features={features} plans={["Free", "Pro"]} />;}

Logo Cloud

Scrolling or static grid of company logos for social proof sections.

Preview

Trusted by leading teams

Acme Corp
Globex
Initech
Umbrella
Hooli
Logo Cloud.tsx
import { LogoCloud } from "@launchapp/design-system/blocks/marketing";const logos = [  { id: "1", name: "Acme Corp", src: "/logos/acme.svg" },  { id: "2", name: "Globex", src: "/logos/globex.svg" },  { id: "3", name: "Initech", src: "/logos/initech.svg" },];export default function Page() {  return <LogoCloud logos={logos} headline="Trusted by leading companies" />;}

Pricing Comparison Table

Detailed feature-by-feature comparison table across all pricing tiers.

Preview

Compare plans

Find the right plan for your team.

MonthlyAnnually
Save 20%
Free
$0/mo
Most Popular
Pro
$29/mo
Enterprise
Custom
Core
Projects
5
Unlimited
Unlimited
Storage
5 GB
100 GB
Custom
Support
Priority Support
Security
SSO
Pricing Comparison Table.tsx
import { PricingComparisonTable } from "@launchapp/design-system/blocks/marketing";const plans = [  { id: "free", name: "Free", price: "$0" },  { id: "pro", name: "Pro", price: "$29/mo", highlighted: true },  { id: "enterprise", name: "Enterprise", price: "Custom" },];const features = [  { category: "Core", items: [    { name: "Projects", free: "5", pro: "Unlimited", enterprise: "Unlimited" },    { name: "Storage", free: "5GB", pro: "100GB", enterprise: "1TB" },  ]},];export default function Page() {  return <PricingComparisonTable plans={plans} features={features} />;}

Changelog Feed

Filterable changelog feed with entry types, tags, and search.

Preview

Changelog

vv2.4.0

AI-powered suggestions

January 15, 2024
Feature

Introduced AI suggestions across the dashboard to help you make better decisions faster.

vv2.3.2

Fix export CSV encoding

January 8, 2024
Fix

Fixed an issue where special characters in exports caused garbled output.

vv2.3.0

Improved dark mode support

January 1, 2024
Improvement

Overhauled theming for better dark mode consistency across all pages.

Changelog Feed.tsx
import { ChangelogFeed } from "@launchapp/design-system/blocks/marketing";const entries = [  { id: "1", version: "2.0.0", date: "2024-03-01", title: "Design System v2", summary: "268 components, dark mode, and complete token refresh.", type: "feature", tags: ["components", "theming"] },  { id: "2", version: "1.5.0", date: "2024-01-15", title: "New Block Library", summary: "40+ new application blocks across 12 categories.", type: "feature", tags: ["blocks"] },  { id: "3", version: "1.4.2", date: "2023-12-01", title: "Accessibility Fixes", summary: "Resolved WCAG 2.1 AA issues in Combobox and Dialog.", type: "fix", tags: ["a11y"] },];export default function Page() {  return (    <ChangelogFeed      entries={entries}      title="Changelog"      showFilters      showSearch    />  );}