Koala UI

Section

Pro

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.

Features

Everything in one system

One container width, one side padding, one canonical gap to the content below. Every section on the page shares the same rhythm.

Fast
From idea to production in a single afternoon.
Polished
Every component ships feeling finished.
Themeable
Four themes from one set of semantic tokens.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add section

Usage#

Section is the full-bleed band; SectionContainer is the centered gutter. Drop a SectionHeader and your content inside the container, and the canonical gap between them (48px, 72px from lg) comes for free.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

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 24px on the sides (32px from sm), and stacks its children in a flex column with a 48px gap, opening to 72px from lg (gap-12 lg:gap-18). Because the gap lives on the container, you never set a header-to-content margin per section again.

import { Section, SectionContainer } from "@/components/ui/section"<Section>  <SectionContainer>    <SectionHeader />    ...  </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.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

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).

Ship polished products, starting today

Pay once, and use it forever.

API reference#

Section

The full-bleed band, a <section> landmark that owns the page's vertical rhythm (64px, 96px from sm). Forwards all native <section> props, and every part accepts className, merged last (so a bg-* wins).

PropTypeDefaultDescription
padding"default" | "none""default"none drops the band's padding for a child that is already its own band (a Hero), so the rhythm keeps a single owner.
CSS variableDescription
--section-pbOverrides the bottom padding when set on the band or an ancestor; 0px collapses the join between two bands on the same ground.

SectionContainer

The centered gutter: caps the width, pads 24px on the sides (32px from sm) and stacks its children in a flex column with a 48px gap (72px from lg). Children stretch; each centers itself. Forwards all native <div> props.

PropTypeDefaultDescription
width"wide" | "xlarge" | "default" | "narrow" | "full""wide"Max width of the column: 1280, 1440, 1152 or 768px, or no cap.

FAQ#

They are the two halves of a section. SectionHeader is the lede (eyebrow, heading, description, optional CTA row). Section is the shell around it: the full-bleed band plus the centered gutter that holds the header and the content below it. Use them together.