# Container

A centered content wrapper with max-width size variants.

## Installation

```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/container.json
```

[Registry JSON](https://reactdocs.canceydejean.dev/r/container.json)

## Preview

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

export function Preview() {
  return (
    <Container
      size="thin"
      className="flex items-center justify-center rounded-2xl border border-dashed bg-background p-4"
    >
      Content goes here...
    </Container>
  );
}
```


## Source

### container.tsx

```tsx
import { cn } from "cn";

import type { ContainerProps } from "./container.types";
import { containerVariants } from "./container.variants";

function Container({ size = "base", className, ...props }: ContainerProps) {
  return (
    <div
      data-slot="container"
      data-size={size}
      className={cn(containerVariants({ size }), className)}
      {...props}
    />
  );
}

export { Container };
```


### container.types.ts

```ts
import type { VariantProps } from "class-variance-authority";
import type { ComponentPropsWithoutRef } from "react";

import type { containerCva } from "./container.variants";

export type ContainerSizeProps = VariantProps<typeof containerCva>;

export type ContainerProps = {
  size?: ContainerSizeProps["size"];
} & ComponentPropsWithoutRef<"div">;
```


### container.variants.ts

```ts
import { cva } from "class-variance-authority";

import { cn } from "cn"

const containerBase = cn("mx-auto w-full px-4 md:px-6");

const containerConfig = {
  variants: {
    size: {
      base: "max-w-7xl",
      contained: "max-w-[1024px]",
      thin: "max-w-[980px]",
      full: "max-w-full",
    },
  },
  compoundVariants: [],
  defaultVariants: {
    size: "base",
  },
} as const;

export const containerCva = cva(containerBase, {
  ...containerConfig,
  compoundVariants: [...containerConfig.compoundVariants],
});

// Export the size variants
export const CONTAINER_SIZES = Object.keys(
  containerConfig.variants.size,
) as (keyof typeof containerConfig.variants.size)[];

export const containerVariants = containerCva;
```



## Usage

Use the container to constrain page or section content. Set `size` to `base`, `contained`, `thin`,
or `full`.

```tsx
import { Container } from "@/components/container/container";

export function Example() {
  return (
    <Container
      size="thin"
      className="bg-background flex items-center justify-center rounded-2xl border border-dashed p-4"
    >
      Content goes here...
    </Container>
  );
}
```