SectionWrapper

Section wrapper is useful when you want to limit the width of the section and center it.

It is basically a shortcut to doing this:

<div className='w-full max-w-screen-sm mx-auto'>
  <span>Hi</span>
</div>

The equivalent usage with SectionWrapper

<SectionWrapper size="sm">
  <span>Hi</span>
</SectionWrapper>

This is the exact implementation of SectionWrapper

export default function SectionWrapper({size, children, className}: {size: 'sm' | 'md' | 'lg' | 'xl' | 'full', className?: string, children: React.ReactNode}) {
  return (
    <div className={
      cn(
        'w-full mx-auto',
        size === 'sm' && 'max-w-screen-sm',
        size === 'md' && 'max-w-screen-md',
        size === 'lg' && 'max-w-screen-lg',
        size === 'xl' && 'max-w-screen-xl',
        size === 'full' && 'max-w-full',
        className
      )
    }>
      {children}
    </div>
  )
}

LINKSHome Documentation Pricing Tutorials

LEGALTerms of Service Privacy policy