Marketing
Hero sections, feature grids, pricing tables, and testimonial carousels.
Hero Section
Landing page hero with headline, subheadline, and CTA buttons.
Build faster with LaunchApp
A complete design system built on Radix UI and Tailwind CSS.
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.
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.
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.
Simple, transparent pricing
Starter
Perfect for individuals and small projects.
- 5 projects
- 10 GB storage
- Email support
Pro
Best for growing teams and businesses.
- Unlimited projects
- 100 GB storage
- Priority support
- Analytics
Enterprise
For large organizations with advanced needs.
- Unlimited everything
- Dedicated support
- Custom integrations
- SLA
Simple, transparent pricing
Starter
Perfect for individuals and small projects.
- 5 projects
- 10 GB storage
- Email support
Pro
Best for growing teams and businesses.
- Unlimited projects
- 100 GB storage
- Priority support
- Analytics
Enterprise
For large organizations with advanced needs.
- Unlimited everything
- Dedicated support
- Custom integrations
- SLA
Simple, transparent pricing
Starter
Perfect for individuals and small projects.
- 5 projects
- 10 GB storage
- Email support
Pro
Best for growing teams and businesses.
- Unlimited projects
- 100 GB storage
- Priority support
- Analytics
Enterprise
For large organizations with advanced needs.
- Unlimited everything
- Dedicated support
- Custom integrations
- SLA
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)} />;}Testimonial Carousel
Auto-rotating testimonials from customers with avatar and quote.
Loved by developers
“LaunchApp cut our frontend development time in half. The components are beautiful and accessible out of the box.”
import { TestimonialCarousel } from "@launchapp/design-system/blocks/marketing";const testimonials = [ { id: "1", quote: "LaunchApp cut our frontend development time in half. The components are beautiful and accessible out of the box.", author: "Sarah Chen", role: "CTO at Startup Inc.", avatarFallback: "SC", }, { id: "2", quote: "The best design system I've worked with. Theming support and dark mode made our redesign a breeze.", author: "Mark Rivera", role: "Lead Engineer at TechCorp", avatarFallback: "MR", },];export default function Page() { return <TestimonialCarousel testimonials={testimonials} />;}Billing Card
Pricing plan card with features list, billing period toggle, and CTA.
Pro
Included features
- Unlimited projects
- 100 GB storage
- Priority support
Next billing date: April 1, 2025
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.
Changelog
Latest updates and improvements.
Design System v2
268 components, dark mode, and more.
New Components
Added Carousel, Timeline, and Heatmap.
Bug Fixes
Resolved accessibility issues in Combobox.
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.
Compare plans
Choose the right plan for your team.
Compare plans | Free$0/mo | Most popular Pro$29/mo | EnterpriseCustom |
|---|---|---|---|
Projects | 5 | Unlimited | Unlimited |
Storage | 5GB | 100GB | Custom |
Support | |||
SSO | |||
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.
Trusted by leading teams
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.
Compare plans
Find the right plan for your team.
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 | |||
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.
Changelog
AI-powered suggestions
Introduced AI suggestions across the dashboard to help you make better decisions faster.
Fix export CSV encoding
Fixed an issue where special characters in exports caused garbled output.
Improved dark mode support
Overhauled theming for better dark mode consistency across all pages.
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 /> );}