Components / Website

Section

Page section wrapper with typed backgrounds. Keeps Instant Strata colour usage consistent across pages: four named background types, an optional max-width container, and a semantic as prop for correct HTML structure.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/section/registry.json

Usage

tsx

import { Section } from "@/components/ui/section"

export function Page() {
  return (
    <>
      <Section type="default" contained>
        <h1>Welcome</h1>
        <p>White background: the default for most sections.</p>
      </Section>

      <Section type="secondary" contained>
        <p>Off-white differentiation between adjacent sections.</p>
      </Section>

      <Section type="primary" contained>
        <p className="text-white">Forest green: hero, footer, or testimonial band.</p>
      </Section>

      <Section type="alternative" contained>
        <p>Lime-soft accent: call-to-action strips.</p>
      </Section>
    </>
  )
}

Types

defaultDefault / White

Most sections. White background with forest text.

secondarySecondary

Off-white. Alternate adjacent sections to create rhythm without heavy contrast.

primaryPrimary

Forest green with white text. Hero sections, footers, testimonial bands. Use sparingly: max 2–3 per page.

alternativeAlternative

Lime-soft. Call-to-action strips or feature highlights.

Examples

Live preview

All four types stacked with contained enabled.

Preview

default

White background

secondary

Off-white background

primary

Forest green background

alternative

Lime-soft background

contained vs full-bleed

tsx

{/* No contained prop: children span full width */}
<Section type="primary">
  <div className="w-full h-64 flex items-center justify-center">
    Full-bleed hero image or video here
  </div>
</Section>

{/* contained prop: wraps in max-w-[1200px] with standard padding */}
<Section type="primary" contained>
  <h1 className="text-white text-4xl font-bold">Build faster.</h1>
</Section>

Semantic elements with as prop

tsx

{/* Semantic HTML via the as prop */}
<Section as="header" type="primary" contained>
  <nav>…</nav>
</Section>

<Section as="footer" type="secondary" contained>
  <p>© 2025 Instant Strata</p>
</Section>

<Section as="main" type="default" contained>
  {children}
</Section>

Width system: Section + Container

The colour band is full-bleed; Container is the single source of truth for content width. Use them together when a band needs both a full-bleed visual and a constrained text column.

Container widths

width="prose"

width="default"

width="wide"

width="full"

tsx

import { Section, Container } from "@/components/ui/section"

{/* The colour band is full-bleed; Container manages width.
    Use them separately when one band needs both a full-bleed
    visual and a constrained text column. */}
<Section type="primary" spacing="lg">
  <FullBleedVisual />
  <Container width="prose">
    <h2>Constrained reading column inside a full-bleed band</h2>
  </Container>
</Section>

{/* Or let Section wrap children for you. contained accepts a
    width name: "prose" | "default" | "wide" | "full". */}
<Section type="secondary" contained="wide">
  <BentoGrid>…</BentoGrid>
</Section>

Section Props

Prop	Type	Default	Description
type	"default" \| "white" \| "secondary" \| "primary" \| "alternative"	"default"	Background style. "default" and "white" are identical (white bg, forest text). "secondary" uses off-white. "primary" uses forest green with white text. "alternative" uses lime-soft.
spacing	"none" \| "sm" \| "md" \| "lg"	"lg"	Vertical padding of the band. lg = py-24 md:py-32, md = py-20 md:py-28, sm = py-12 md:py-16.
as	"section" \| "div" \| "article" \| "header" \| "footer" \| "main"	"section"	The HTML element to render. Choose semantically: use header for page headers, footer for footers, main for the primary content area.
contained	boolean \| "prose" \| "default" \| "wide" \| "full"	false	Convenience: wrap children in a Container of this width. true maps to "default" (1200px). Pass false to manage the Container yourself.
className	string	-	Additional classes applied to the outer element. The type's background and text classes are always included.
children	ReactNode	-	Section content.

Container Props

Prop	Type	Default	Description
width	"prose" \| "default" \| "wide" \| "full"	"default"	Max content width. prose = 740px, default = 1200px, wide = 1360px, full = no limit (gutter only).
gutter	boolean	true	Apply the responsive horizontal gutter (px-6 md:px-12).
className	string	-	Additional classes on the container.