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
Prop | Type | Default | Description |
---|---|---|---|
variant | "standard" | "prose" | "standard" | Controls the layout style |
class | string | "" | Additional custom classes |
id | string | "" | 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
Slot | Description |
---|---|
default | The 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.