Skip to content
Layout

Container

Centers content at a readable width, with gutters that grow with the screen.

import { Container } from "@flinbu/seed";

Sizes

sm
md
prose
import { Container, Stack } from "@flinbu/seed";

<Stack gap="xs" className="w-full">
  {(["sm", "md", "prose"] as const).map((s) => <Container key={s} size={s} padding={false}><div className="rounded-md border border-secondary bg-secondary px-sm py-xs font-mono mono-value-regular">{s}</div></Container>)}
</Stack>

Use it for

  • Page content under the app shell.

Props

PropTypeDefaultDescription
size'sm''md''lg''xl''prose''full''lg'672, 768, 1024, 1280px, 65 characters, or none.
paddingbooleantrue16, 24, then 40px gutters.

Accessibility

  • Pure layout.