Container

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Container } from "@tessinaui/ui";

<Container>
  <h1>Dashboard</h1>
</Container>

<Container size="sm" padding="responsive" render={<article />}>
  <p>A reading-width article with responsive gutters, rendered as &lt;article&gt;.</p>
</Container>

<Container size="full" padding="none">
  {/* full-bleed section — e.g. a coloured hero background */}
</Container>

Examples

Default

The simplest usage — content constrained to the default lg width with responsive padding, centered in the viewport.

Sizes

Each size sets a max-width preset, from xs (448px) up to full.

Padding

The padding prop controls horizontal gutters inside the container, with a responsive preset that scales across breakpoints.

Semantic HTML

Use the render prop to keep Container's styling while changing the underlying element — here, an <article>.

Full-bleed background

A size="full" Container paints an edge-to-edge background while a nested narrower Container keeps the content readable.

Sizes

Each size sets a max-width preset. Pick the narrowest size that still fits your content.

Padding

Horizontal padding is applied inside the container. The responsive preset scales across breakpoints (tight on mobile, roomy on desktop) and is the default.

Centering

Container centers horizontally with mx-auto by default. Turn it off for left-aligned layouts:

<Container center={false}>
  {/* aligns to the start edge */}
</Container>

Polymorphic rendering

Use the render prop to keep Container's styling but render as a different semantic element. This is the same pattern Tessina's Button and Link use.

<Container size="md" render={<main />}>
  <h1>Page title</h1>
</Container>

<Container size="sm" render={<article />}>
  {/* blog post */}
</Container>

<Container size="lg" render={<section aria-label="Features" />}>
  {/* landing page section */}
</Container>

Nested containers

A common pattern is a wide outer container for chrome (header, hero background) and a narrower inner container for reading content:

<Container size="xl" padding="responsive">
  <Container size="sm" padding="none">
    <article>{/* reading-width prose */}</article>
  </Container>
</Container>

Full-bleed backgrounds

To paint a full-width background while keeping content constrained, wrap a narrower Container inside a size="full" one (or use a plain <div> for the background):

<Container size="full" padding="none">
  <div className="bg-foreground py-12">
    <Container size="lg" padding="responsive">
      <h1 className="text-background">Hero</h1>
    </Container>
  </div>
</Container>

RTL

Container is direction-agnostic for layout (max-width, mx-auto, symmetric padding). Pass dir="rtl" to propagate direction to descendants:

<Container dir="rtl">
  <article>محتوى</article>
</Container>

Accessibility

• Container renders a plain <div> by default — attach semantic meaning via render where appropriate (<main>, <section>, <article>, <nav>, <aside>).
• Container has no keyboard or focus behaviour of its own.
• Avoid applying max-w to interactive elements directly; let Container absorb the constraint so your buttons, inputs, and links keep their natural hit area.

API Reference

Container

The component extends all standard HTML attributes for the rendered element.