Container

Layout

Centered max-width content wrapper.

Preview

Content centered in a max-width container

Usage

example.jsx

import { Container } from "@/components/ui/container";

export default function Example() {
  return <Container />;
}

Source Code

Copy this file into components/ui/container.jsx in your project.

container.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Container = forwardRef(({ className, size = "default", ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "mx-auto w-full px-4 sm:px-6 lg:px-8",
      size === "sm" && "max-w-3xl",
      size === "default" && "max-w-5xl",
      size === "lg" && "max-w-7xl",
      size === "full" && "max-w-full",
      className
    )}
    {...props}
  />
));
Container.displayName = "Container";

export { Container };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge