Wrapper

A utility layout component for wrapping content with standard or prose-style layouts.

Last updated: July 1, 2025

Overview

The Wrapper component provides flexible layout structure with consistent padding and max-width utilities. It’s useful for standard page sections and documentation-style content with typography support.

Usage

<Wrapper>
  <h2>Default Layout</h2>
  <p>This content is wrapped using the standard layout variant.</p>
</Wrapper>

Props

PropTypeDefaultDescription
variant"standard" | "prose""standard"Controls the layout style
classstring""Additional custom classes
idstring""Optional id for anchoring or reference

Variants

Standard (default)

Centers content with padding and a max-width container.

<Wrapper variant="standard">
  <p>This is the standard centered section layout.</p>
</Wrapper>

Prose

Applies custom Tailwind typography styles for rich content and markdown formatting.

<Wrapper variant="prose">
  <h2>Rich Text Content</h2>
  <p>Includes styles for paragraphs, links, blockquotes, images, and more.</p>
</Wrapper>

Example

<Wrapper variant="prose">
  <h2>Documentation Style</h2>
  <p>This section uses the prose variant for long-form content and markdown.</p>
  <blockquote>This is a styled blockquote.</blockquote>
  <pre><code>const x = 42;</code></pre>
</Wrapper>

Custom Classes

Extend or override styling using the class prop:

<Wrapper class="bg-base-100 py-16">
  <h3>Custom Styled Section</h3>
</Wrapper>

Slot

SlotDescription
defaultThe main content to be rendered inside the wrapper

Best Practices

  • Use variant="standard" for layouts and UI sections outshide thew DocsLayout.
  • Use variant="prose" for documentation, blog posts, or markdown-based content.
  • Combine with id to support anchor links or in-page navigation.
Edit on GitHub
Was this helpful?