Container

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/container.json

npx shadcn@latest add https://prototyper-ui.com/r/container.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/container.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/container.json

This will add the following files to your project:

• components/ui/container.tsx

Usage

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

<Container maxWidth="4xl" padding="md">
  <p>Content is constrained and centered.</p>
</Container>

Container is a simple <div> that constrains its children to a max-width and adds horizontal padding. Use it inside a Section or on its own when you need to center page content.

Examples

Narrow Content

Styling

Data Slots

Use data-slot attributes to target the container in CSS:

Customization Examples

/* Add vertical padding to all containers */
[data-slot="container"] {
  @apply py-8;
}

<Container className="py-12" maxWidth="2xl">
  Custom styled container
</Container>

API Reference

Container

A centered, width-constrained content wrapper.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

Container is a non-interactive presentational wrapper and does not have keyboard interactions.

ARIA Attributes

• Renders as a plain <div> with no implicit ARIA role.
• No additional ARIA attributes are needed for a layout container.

Related