milkie
Component-Level Gating

Mixed Content Example

This page demonstrates how you can mix free and premium content on the same page. Free content is visible to everyone, while premium sections are gated.

Free Preview Content
Free
Everyone can see this section

This is a free preview section that everyone can access. You might use this to:

  • Show a teaser of your content
  • Explain the value proposition
  • Display the first few paragraphs of an article
  • Show thumbnails or previews of premium features

Below, you'll see premium content sections that are only visible to subscribers.

Premium Tutorial
Premium
Unlock this section with a subscription

This premium content includes:

  • • Step-by-step implementation guide
  • • Code examples and best practices
  • • Common pitfalls and how to avoid them
  • • Performance optimization tips

Subscribe to unlock this content and more.

More Free Content
Free
Additional free information for everyone

Notice how you can intersperse free and premium content throughout the same page. This is perfect for:

  • Blog posts with premium sections
  • Tutorial series with advanced topics locked
  • Feature showcases with some features gated
  • Documentation with pro tips for subscribers
Advanced Features
Premium
Unlock advanced techniques and examples

Subscribe to access advanced code examples, performance tips, and production deployment strategies.

How This Page Works
// Mix free and premium content on the same page
<Card>
  <CardTitle>Free Content</CardTitle>
  <CardContent>Everyone can see this</CardContent>
</Card>

<PaywallGate
  customUi={<LockedPreview />}
>
  <Card>
    <CardTitle>Premium Content</CardTitle>
    <CardContent>Only subscribers see this</CardContent>
  </Card>
</PaywallGate>

<Card>
  <CardTitle>More Free Content</CardTitle>
  <CardContent>Back to free content</CardContent>
</Card>