Container

The standard page-width wrapper, matching the Chandra Asri container spec: centers content and caps it at 1336px with 1rem padding.

Server-safe

app/components/ui/container.tsx

Installation

npx chandra-asri-ui add container

Example

The dashed box below is the Container's edge — see Style Guide for the full source spec.

Container content — capped at 1336px, centered, 1rem padding.

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

/**
 * Standard page-width wrapper, matching the Chandra Asri container spec:
 * centered, capped at 1336px, 1rem padding at every breakpoint. Use this
 * at the top of every page section instead of
 * one-off `max-w-*` classes so widths stay consistent.
 */
export function Container({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("mx-auto w-full max-w-[1336px] px-4", className)}
      {...props}
    />
  );
}