Balick UI

Section

Layout primitives shared by every block: Section, Container and SectionHeader.

Open in

Changelog

Shipped this week.

Every block uses the same header, container and vertical rhythm, so sections always line up.

Installation#

pnpm dlx shadcn@latest add https://ui.balick.me/r/section.json

Or, with the namespace configured: @balick/section

Usage#

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

export function Faq() {
  return (
    <Section>
      <SectionHeader
        eyebrow="FAQ"
        title="Questions, answered."
        description="Everything you need to know before getting started."
      />
      <div className="mt-16">{/* Your content */}</div>
    </Section>
  )
}

Props#

<Section />

PropTypeDefault
spacing

Vertical padding. Use "none" when the block manages its own.

"none" | "compact" | "default""default"
width

Maximum width of the content: 3xl, 6xl or 7xl.

"narrow" | "default" | "wide""default"
containerClassName

Classes applied to the inner container.

string—

<Container />

PropTypeDefault
width

Maximum width of the content: 3xl, 6xl or 7xl.

"narrow" | "default" | "wide""default"

<SectionHeader />

PropTypeDefault
title

Heading of the section. Required.

ReactNode—
eyebrow

Short label above the title, set in monospace capitals.

ReactNode—
description

Supporting text under the title.

ReactNode—
align

Alignment of the header.

"center" | "left""center"
as

Heading level of the title.

"h1" | "h2" | "h3""h2"
children

Actions shown under the description, such as a toggle or buttons.

ReactNode—