Marketing

Container

The 1184px page column with responsive gutters.

Preview

At most 1184px, with gutters that tighten on narrow screens

Install

pnpm dlx shadcn@latest add @abnormal/container

Brings inutilsradix-ui

Usage

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

export default function ContainerDemo() {
  return (
    <div className="w-full bg-surface py-6">
      <Container className="rounded-control border border-dashed border-input bg-background py-6 text-center text-muted-foreground">
        At most 1184px, with gutters that tighten on narrow screens
      </Container>
    </div>
  );
}

Source

import * as React from "react";
import { Slot } from "radix-ui";
import { cn } from "@/lib/utils";

/** The page column: at most 1184px, with gutters that tighten from 40px to 24px and 16px on narrow screens. */
function Container({ className, asChild = false, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "div";
  return (
    <Comp
      data-slot="container"
      className={cn(
        "mx-auto w-[min(1184px,calc(100%-80px))] max-[49.9375rem]:w-[calc(100%-48px)] max-[37.4375rem]:w-[calc(100%-32px)]",
        className,
      )}
      {...props}
    />
  );
}

export { Container };