CSSN'T Components

Container Examples

Copy-ready examples with live previews.

Basic usage

Container wraps content inside a consistent surface.

Live preview

Body contentContainer wraps children inside .cssnt-container__body.

import { Container } from "@/packages/ui/src/_components/container/Container";

export default function Example() {
  return (
    <Container customStyles={{ padding: 16 }}>
      <div>Content</div>
    </Container>
  );
}

Header and footer slots

Optional header/footer ReactNode slots.

Live preview

BodyHeader and footer are optional slots.

import { Container } from "@/packages/ui/src/_components/container/Container";

export default function Example() {
  return (
    <Container
      variant="white"
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      customStyles={{ padding: 16 }}
    >
      <div>Body</div>
    </Container>
  );
}

Variants

Use variant to apply a tone/surface preset (mapped to classes).

Variants come from the Container.type union (e.g. "white", "primary", "primary-tonal", etc).

Pick the tone based on the surface you need (base vs tonal).

Live preview

Whitevariant="white"

Body

Primaryvariant="primary"

Body

Primary tonalvariant="primary-tonal"

Body

Secondaryvariant="secondary"

Body

Secondary tonalvariant="secondary-tonal"

Body

Info tonalvariant="info-tonal"

Body

import { Container } from "@/packages/ui/src/_components/container/Container";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-start" }}>
      <Container variant="white" customStyles={{ padding: 16, width: 260 }}>
        <div>white</div>
      </Container>

      <Container variant="primary" customStyles={{ padding: 16, width: 260 }}>
        <div>primary</div>
      </Container>

      <Container variant="primary-tonal" customStyles={{ padding: 16, width: 260 }}>
        <div>primary-tonal</div>
      </Container>

      <Container variant="secondary-tonal" customStyles={{ padding: 16, width: 260 }}>
        <div>secondary-tonal</div>
      </Container>
    </div>
  );
}

Sizing (width/height)

Apply width/height to the root and manage overflow inside the body.

Live preview

Line 1: Filler text to validate height and overflow.
Line 2: Filler text to validate height and overflow.
Line 3: Filler text to validate height and overflow.
Line 4: Filler text to validate height and overflow.
Line 5: Filler text to validate height and overflow.
Line 6: Filler text to validate height and overflow.
Line 7: Filler text to validate height and overflow.
Line 8: Filler text to validate height and overflow.
Line 9: Filler text to validate height and overflow.
Line 10: Filler text to validate height and overflow.
Line 11: Filler text to validate height and overflow.
Line 12: Filler text to validate height and overflow.
Line 13: Filler text to validate height and overflow.
Line 14: Filler text to validate height and overflow.

Compact contentUseful for side panels or small widgets.

import { useMemo } from "react";
import { Container } from "@/packages/ui/src/_components/container/Container";

export default function Example() {
  const longText = useMemo(
    () =>
      Array.from({ length: 14 })
        .map((_, i) => `Line ${i + 1}: Filler text to validate height and overflow.`)
        .join("\n"),
    []
  );

  return (
    <Container
      variant="secondary-tonal"
      width="360px"
      height="220px"
      customStyles={{ padding: 16 }}
      header={<div>Fixed height</div>}
      footer={<div>Footer</div>}
    >
      <div style={{ height: "100%", overflow: "auto", whiteSpace: "pre-wrap" }}>
        {longText}
      </div>
    </Container>
  );
}

Nested containers

Useful for layout sections and grouped surfaces.

Live preview

Body

import { Container } from "@/packages/ui/src/_components/container/Container";

export default function Example() {
  return (
    <Container variant="white" customStyles={{ padding: 16 }} header={<div>Outer</div>}>
      <div style={{ display: "grid", gap: 12 }}>
        <Container variant="primary-tonal" customStyles={{ padding: 14 }} header={<div>Inner A</div>}>
          Body
        </Container>

        <Container
          variant="secondary-tonal"
          customStyles={{ padding: 14 }}
          header={<div>Inner B</div>}
          footer={<div>Footer</div>}
        >
          Body
        </Container>
      </div>
    </Container>
  );
}

Controlled (playground pattern)

Toggle variant and slots using local state.

Live preview

Playground pattern: the component is presentational and your app controls header/footer content.

import { useState } from "react";
import { Container } from "@/packages/ui/src/_components/container/Container";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

type VariantToggle = "none" | "white" | "primary" | "primary-tonal" | "secondary-tonal";

export default function Example() {
  const [variant, setVariant] = useState<VariantToggle>("secondary-tonal");
  const [header, setHeader] = useState(true);
  const [footer, setFooter] = useState(true);

  const nextVariant = () =>
    setVariant((v) => {
      const order: VariantToggle[] = ["none", "white", "primary", "primary-tonal", "secondary-tonal"];
      const idx = order.indexOf(v);
      return order[(idx + 1) % order.length];
    });

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
        <Button variant="secondary" ripple outline size="small" onClick={nextVariant}>
          Variant: {variant}
        </Button>

        <Button variant="secondary" ripple outline size="small" onClick={() => setHeader((v) => !v)}>
          Header: {header ? "ON" : "OFF"}
        </Button>

        <Button variant="secondary" ripple outline size="small" onClick={() => setFooter((v) => !v)}>
          Footer: {footer ? "ON" : "OFF"}
        </Button>
      </div>

      <Container
        variant={variant === "none" ? undefined : variant}
        customStyles={{ padding: 16 }}
        header={header ? <div>Header</div> : undefined}
        footer={footer ? <div>Footer</div> : undefined}
      >
        <div>Body</div>
      </Container>
    </div>
  );
}

Container Props

Layout wrapper that provides a consistent surface with optional header and footer slots. It always wraps children inside .cssnt-container__body.

Class names: root=cssnt-container, header=cssnt-container__header, body=cssnt-container__body, footer=cssnt-container__footer.

If you pass `height`, manage overflow inside the body (e.g. a child with `overflow: auto`).

Variant class names depend on your Container.variants mapping (for example: cssnt-container--primary, cssnt-container--secondary-tonal).

Container props
Prop	Type	Required	Default	Description
children	React.ReactNode \| string	No	n/a	Body content, rendered inside .cssnt-container__body.
header	React.ReactNode \| string	No	n/a	Optional header slot, rendered inside .cssnt-container__header.
footer	React.ReactNode \| string	No	n/a	Optional footer slot, rendered inside .cssnt-container__footer.
customStyles	React.CSSProperties	No	n/a	Inline styles applied to the root element.
height	string	No	n/a	Inline height applied to the root element (e.g. "220px").
width	string	No	n/a	Inline width applied to the root element (e.g. "100%", "360px").
variant	"white" \| "black" \| "primary" \| "secondary" \| "tertiary" \| "success" \| "warning" \| "danger" \| "info" \| "primary-tonal" \| "secondary-tonal" \| "tertiary-tonal" \| "success-tonal" \| "warning-tonal" \| "danger-tonal" \| "info-tonal"	No	n/a	Surface/tone variant (mapped to classes). (Values: white, black, primary, secondary, tertiary, success, warning, danger, info, primary-tonal, secondary-tonal, tertiary-tonal, success-tonal, warning-tonal, danger-tonal, info-tonal)