React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

LayoutBox

A centered content container with optional header, constraining content to a maximum width of 720px

Interactive Playground

Customize the LayoutBox properties and see the changes in real-time

Main content goes here (max-width: 720px)

Examples

Common use cases for the LayoutBox component

Basic Usage

Centered Content

This content is automatically centered and constrained to 720px width

With Header

Page Header

Optional header content

Main content area

Form Layout

Contact Form

Fill out the form below

API Reference

Props

children

ReactNode - Main content to be rendered inside the layout box

header

ReactNode - Optional header content displayed above the main content

className

string - Additional CSS classes to apply to the container

Usage Notes

  • • The LayoutBox constrains content to a maximum width of 720px
  • • Content is automatically centered with mx-auto
  • • The component is full width (w-full) until it reaches the max-width constraint
  • • Use the header prop to add content above the main content area
  • • Perfect for forms, articles, and other content that benefits from a narrower reading width
  • • The header content is not constrained by the 720px max-width