Snippet

Container

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

Demo

This text is contained and has a custom className with a border.

Usage

src/app/page.tsx

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

Source Code

src/components/container.tsx

import { PropsWithChildren } from 'react'
 
import { cn } from '@/lib/utils'
 
const Container = ({ children, className }: { className?: string } & PropsWithChildren) => {
  return <div className={cn('mx-auto w-full p-2 md:p-4 max-w-3xl lg:max-w-6xl', className)}>{children}</div>
}
 
export default Container