My App

Section library

Explore the actual components, then use their content props to compose a page. Each preview includes its source and a minimal usage example.

src/blocks/hero.tsx
<Hero content={content.hero} brand="Your brand" action={action} />

Component preview

Hero

Introduce the page with a headline, a short description and a primary action. Pass brand separately and build the action in the page.

src/blocks/features.tsx
<Features content={content.features} />

Features

Present features in an icon card grid. Pass title, description and items; each item has an id, icon, title and description.

Feature 1

Explain one capability in a short sentence. Repeat this item for each feature.

Feature 2

Explain one capability in a short sentence. Repeat this item for each feature.

Feature 3

Explain one capability in a short sentence. Repeat this item for each feature.

src/blocks/pricing.tsx
<Pricing content={content.pricing} />

Pricing

Pass the section title and description. Plans, prices and billing tabs come from the existing pricing catalog and shared messages. Use compact for a smaller purchase panel.

Starter

$9/mo

For individuals

  • 1 project
  • 5,000 credits
  • Email support

Pro

$29/mo

For growing teams

  • Unlimited projects
  • 50,000 credits
  • Priority support
  • API access

Enterprise

$99/mo

For large organizations

  • Everything in Pro
  • 500,000 credits
  • Dedicated support
  • Custom integrations
src/blocks/faq.tsx
<FAQ content={content.faq} />

FAQ

Answer common questions in an accordion. Pass title, description and items with id, question and answer.

src/blocks/blog.tsx
<Blog content={content.blog} posts={posts} locale={locale} viewAllHref="/blog" />

Blog

Show article cards from posts. Pass content, posts, locale and viewAllHref. Each post provides its slug, title, description and date; images and authors are optional.

src/blocks/changelog.tsx
<Changelog content={content.changelog} entries={entries} heading="h2" />

Release timeline

Changelog

Present releases in a dated timeline. Pass content and entries with version, date, formattedDate, tags and a Content component.

Latest update:

v1.0.0

Release entry

Summarize the release in one sentence.

  • Example

Use the Content component for the release details. The timeline displays the date, version and tags alongside it.

src/blocks/cta.tsx
<CTA content={content.cta} action={action} />

CTA

Close the page with a headline, short description and action. Pass content and supply the button or link through the action slot.