Container

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

export function ContainerDemo() {
  return (
    <div className="w-full bg-muted/40 py-6">

Installation

pnpmnpmyarnbun
pnpm slabui add container
Copy

Usage

Copyimport { Container } from "@/components/ui/container"

Copy<Container>
  <h1>Page title</h1>
</Container>

You can also use the container utility directly, without the component:

Copy<div className="container">...</div>

Utility

The container utility centers the content, sets width: 100%, limits the width to --page (1200px by default) and adds horizontal padding.

It extends Tailwind's built-in container. The max width does not follow the breakpoints: only the padding does.

Responsive behavior

The max width is a limit, not a fixed width: below it, the container takes the full width of its parent, so it never overflows a small screen.

• Safe area: the padding is never smaller than the device's safe area (env(safe-area-inset-left) and -right), so the content stays clear of the notch on a phone in landscape. It only takes effect with viewport-fit=cover in the viewport meta tag.
• Inside flex: the container has min-w-0, so it shrinks inside a flex row instead of growing with wide content. Wide children, such as tables or code blocks, still need their own overflow-x-auto.
• Nested containers: the paddings add up. Use px-0 on the inner one, or use a plain div.

Customizing the widths

The max widths of the sm, default and lg sizes are theme variables: --page-sm, --page and --page-lg. Change them in the Layout section of the theme editor, and every container follows.

Sizes

Use the size prop to change the max width. It only replaces the max width; the centering and the padding stay the same.

The preview below shows a 1600px wide screen at 25% scale.

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

const sizes = [
  { size: "sm", label: "sm" },
  { size: "default", label: "default" },

In an app

Inside an app shell, the container is centered in the content area, not in the viewport. Pick the size by the content: sm for forms and settings, lg or full for dashboards and tables.

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

export function ContainerApp() {
  return (
    <div className="flex w-full overflow-hidden rounded-lg border border-border">

Render

Use the render prop to render a different element, such as a section or main.

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

export function ContainerRender() {
  return (
    <Container

Copy<Container render={<main />}>...</Container>

API Reference

Container

It also accepts all the props of a div. See the Base UI useRender documentation for the render prop.