Container

A responsive max-width wrapper with horizontal gutters

Container · max-w-screen-lg · responsive gutter

import { Container } from '@/components/container';

export default function ContainerPreview() {
  return (
    <Container size="md" gutter="md">
      <div className="rounded-xl border border-border bg-background-secondary p-6 text-center text-foreground-secondary text-sm">
        Container · max-w-screen-lg · responsive gutter
      </div>
    </Container>
  );
}

Dependencies

Slot

Source Code

import type { VariantProps } from 'cva';

import { Slot } from '@/components/slot';
import { cn, cva } from '@/lib/utils/classnames';

const containerStyle = cva({
  base: 'mx-auto w-full',
  variants: {
    size: {
      xs: 'max-w-screen-sm',
      sm: 'max-w-screen-md',
      md: 'max-w-screen-lg',
      lg: 'max-w-screen-xl',
      xl: 'max-w-screen-2xl',
      full: 'max-w-none',
    },
    gutter: {
      none: '',
      sm: 'px-4 sm:px-6',
      md: 'px-4 sm:px-6 lg:px-8',
      lg: 'px-6 sm:px-8 lg:px-12',
    },
    bleed: {
      // Breaks out of any constrained parent to full viewport width by
      // centering a viewport-wide box. Works regardless of parent width.
      true: 'mx-[calc(50%-50vw)] w-screen max-w-none',
      false: '',
    },
  },
  defaultVariants: {
    size: 'lg',
    gutter: 'md',
    bleed: false,
  },
});

interface ContainerProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof containerStyle> {
  asChild?: boolean;
}

const Container = ({
  ref,
  className,
  size,
  gutter,
  bleed,
  asChild,
  ...rest
}: ContainerProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn(containerStyle({ size, gutter, bleed }), className)}
      {...rest}
    />
  );
};

export type { ContainerProps };
export { Container, containerStyle };

Server component. No 'use client' — layout primitive (max-width + gutter); no hooks or own handlers.

Container is the outermost wrapper for any page or section. It centers its content and applies a sensible max-width plus horizontal gutter.

Set bleed to break a child out of a constrained Container to full viewport width — for full-bleed images or colored bands inside otherwise clamped content.

Anatomy


          <Container size="lg" gutter="md">
  {children}

  {/* Breaks out to full viewport width */}
  <Container bleed gutter="none">
    {fullWidthContent}
  </Container>
</Container>

API Reference

Extends the div element.

Prop	Default	Type
`size`	`"lg"`	`"xs""sm""md""lg""xl""full"`
`gutter`	`"md"`	`"none""sm""md""lg"`
`bleed`	`false`	`boolean`
`asChild`	-	`boolean`

Examples

Default

Container · max-w-screen-lg · responsive gutter

import { Container } from '@/components/container';

export default function ContainerPreview() {
  return (
    <Container size="md" gutter="md">
      <div className="rounded-xl border border-border bg-background-secondary p-6 text-center text-foreground-secondary text-sm">
        Container · max-w-screen-lg · responsive gutter
      </div>
    </Container>
  );
}

Bleed

Clamped content · max-w-screen-lg

Full-bleed band · breaks out to viewport width

Clamped content resumes

import { Container } from '@/components/container';

export const meta = { layout: 'fullscreen' };

export default function ContainerBleedPreview() {
  return (
    <Container size="md" gutter="md" className="py-8">
      <div className="rounded-xl border border-border bg-background-secondary p-6 text-center text-foreground-secondary text-sm">
        Clamped content · max-w-screen-lg
      </div>

      <Container bleed gutter="none" className="my-6">
        <div className="bg-foreground p-6 text-center text-background text-sm">
          Full-bleed band · breaks out to viewport width
        </div>
      </Container>

      <div className="rounded-xl border border-border bg-background-secondary p-6 text-center text-foreground-secondary text-sm">
        Clamped content resumes
      </div>
    </Container>
  );
}

Color Picker

Data Table