Blog

Post list, post detail, and newsletter signup for blog and content sites.

Post List

Blog post listing with category filters and pagination.

Preview

From the blog

Tutorial

Getting Started with LaunchApp

A quick intro to the design system.

Alice Johnson2024-01-01
Guide

Advanced Component Patterns

Deep dive into composition patterns.

Bob Smith2024-02-01
Release

What's New in v2.0

All the new features and improvements.

Carol White2024-03-01
Post List.tsx
import { PostList } from "@launchapp/design-system/blocks/blog";const posts = [  { id: "1", title: "Getting Started", slug: "getting-started", excerpt: "A quick intro.", category: "Tutorial", publishedAt: "2024-01-01", author: { name: "Alice" } },  { id: "2", title: "Advanced Patterns", slug: "advanced", excerpt: "Deep dive.", category: "Guide", publishedAt: "2024-02-01", author: { name: "Bob" } },];export default function Page() {  return <PostList title="Blog" posts={posts} categories={["Tutorial", "Guide"]} />;}

Post Detail

Full blog post layout with author info, metadata, and related posts.

Preview

No preview available

See the code snippet below for usage.

Post Detail.tsx
import { PostDetail } from "@launchapp/design-system/blocks/blog";export default function Page() {  return (    <PostDetail      title="Getting Started with LaunchApp"      publishedAt="2024-01-01"      author={{ name: "Alice Johnson", avatarUrl: "" }}      category="Tutorial"      content={<p>Post content goes here.</p>}    />  );}

Newsletter Signup

Email newsletter signup form with headline and confirmation state.

Preview

No preview available

See the code snippet below for usage.

Newsletter Signup.tsx
import { NewsletterSignup } from "@launchapp/design-system/blocks/blog";export default function Page() {  return (    <NewsletterSignup      headline="Stay in the loop"      description="Get the latest updates delivered to your inbox."      onSubscribe={(email) => console.log("subscribe", email)}    />  );}