Koala UISection
The content half of every marketing section: a full-bleed band and a centered 1280px gutter with a canonical gap to the content below. Pair it with SectionHeader and every block shares one rhythm.
Installation#
Usage#
Section is the full-bleed band; SectionContainer is the centered gutter. Drop a SectionHeader and your content inside the container, and the 56px gap between them comes for free.
import { Section, SectionContainer } from "@/components/ui/section"
import {
SectionHeader,
SectionHeaderText,
SectionHeaderHeading,
SectionHeaderDescription,
} from "@/components/ui/section-header"
export function Features() {
return (
<Section>
<SectionContainer>
<SectionHeader align="center">
<SectionHeaderText>
<SectionHeaderHeading>Everything in one system</SectionHeaderHeading>
<SectionHeaderDescription>One rhythm for every section.</SectionHeaderDescription>
</SectionHeaderText>
</SectionHeader>
<div className="grid gap-4 sm:grid-cols-3">{/* content */}</div>
</SectionContainer>
</Section>
)
}Anatomy#
Two parts, one job each. Section is the band: it owns the vertical rhythm (py-16 sm:py-24) and spans edge to edge, so a background tint or image bleeds full-width. SectionContainer is the gutter: it caps the width, pads 20px on the sides (32px from sm), and stacks its children in a flex column with a 56px gap (gap-14). Because the gap lives on the container, you never set a header-to-content margin per section again.
<Section> {/* full-bleed band — py-16 sm:py-24 */}
<SectionContainer> {/* centered gutter — max-w 1280px, px-6 sm:px-8, gap-14 (56px) */}
<SectionHeader … /> {/* the lede */}
<YourContent /> {/* lands 56px below the header */}
</SectionContainer>
</Section>Container width#
width caps the content column. wide (default, 1280px) is the marketing width; the rest map to Tailwind's native scale: default (1152px), narrow (768px) for reading-width content, or full for an edge-to-edge row. xlarge (1440px) is an opt-in escape for a band that must run wider than the canon. It mirrors LayoutContainer, so app and marketing shells share one width vocabulary.
<SectionContainer width="wide">…</SectionContainer> {/* 1280px (default) */}
<SectionContainer width="xlarge">…</SectionContainer> {/* 1440px, opt-in escape */}
<SectionContainer width="default">…</SectionContainer> {/* 1152px */}
<SectionContainer width="narrow">…</SectionContainer> {/* 768px */}
<SectionContainer width="full">…</SectionContainer> {/* edge to edge */}Full-bleed band#
The band spans the page, so a tint, gradient, or image set on Section reads edge to edge while the content stays in the centered gutter. Override the vertical rhythm with a className when a section needs to sit tighter (it merges last).
API reference#
Section
The full-bleed band. Renders a <section> landmark with py-16 sm:py-24 rhythm. Forwards native <section> props and className (merged last, so a bg-* or padding override wins).
SectionContainer
The centered gutter: caps width per width ("wide" default, "xlarge", "default", "narrow", "full"), pads 24px on the sides (32px from sm), and stacks children in a flex column with a 56px gap. Forwards native <div> props and className.