Snippet

Container

A wrapper component that has a max-width, padding, and and overridable className.

The Container component is a reusable layout wrapper in React. It allows for flexible styling and structure for content by leveraging class names and conditionally applying styles.

Props

  • children: The content to be wrapped by the Container.
  • className: Additional CSS classes to apply to the container.
  • mt: If true, adds a top margin of mt-32.
  • main: If true, renders the container as a <main /> element instead of a <div /> and applies additional styling (mb-24).
  • maxWidth: If true, restricts the container’s maximum width to max-w-3xl.

Demo

This text is contained and has a custom className with a border. It's also using the maxWidth prop

Usage

src/app/page.tsx
import Container from '@/components/container'
import HeaderText from '@/components/header-text'
 
export default function Page() {
  return (
    <Container main mt maxWidth>
      <HeaderText title='Code snippets for you' description='Not at all inspired by shadcn/ui.' />
    </Container>
  )
}

Source Code

src/components/container.tsx
import { type PropsWithChildren } from 'react'
 
import { cn } from '@/lib/utils'
 
const Container = ({ children, className, mt = false, main = false, maxWidth = false }: { className?: string; main?: boolean; mt?: boolean; maxWidth?: boolean } & PropsWithChildren) => {
  const sharedClassName = cn('mx-auto w-full p-4 md:p-6 md:py-2 max-w-3xl lg:max-w-6xl space-y-12', {
    'mt-32': mt,
    'max-w-xl lg:max-w-xl': maxWidth,
  })
 
  if (main) {
    return <main className={cn('mb-24', sharedClassName, className)}>{children}</main>
  }
 
  return <div className={cn(sharedClassName, className)}>{children}</div>
}
 
export default Container