Vibes logo

Section Layout

The Section Layout component wraps a section of content with a max-width, is centered horizontally, and includes padding.

Installation

Run the following command

npx vibes@latest add section-layout

Usage

import { SectionLayout } from '@/vibes/soul/sections/section-layout';function Usage() {  return (      <SectionLayout containerSize="md">        <div>My section content</div>      </SectionLayout>  );}

API Reference

SectionLayoutProps

PropTypeDefault
children*
ReactNode
className
string
containerSize
'md' | 'lg' | 'xl' | '2xl' | 'full'

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --section-max-width-md: 768px;  --section-max-width-lg: 1024px;  --section-max-width-xl: 1280px;  --section-max-width-2xl: 1536px;}