Section

Page sections with consistent vertical rhythm, background tones and a header with eyebrow, title, description and actions.

Platform

Ship from a pull request

Everything between git push and production, without a pipeline to maintain.

Preview deploys

A URL for every branch, torn down on merge.

Edge caching

Static output served from 30 regions.

Rollbacks

Back to any previous build in one click.

1import { Button } from '@/components/ui/button';
2import { Section } from '@/components/ui/section';
3
4const features = [
5  { title: 'Preview deploys', detail: 'A URL for every branch, torn down on merge.' },
6  { title: 'Edge caching', detail: 'Static output served from 30 regions.' },
7  { title: 'Rollbacks', detail: 'Back to any previous build in one click.' },
8];
9
10export function Default() {
11  return (
12    <Section size="sm" background="card" className="w-full max-w-2xl rounded-xl">
13      <Section.Header>
14        <Section.Eyebrow>Platform</Section.Eyebrow>
15        <Section.Title>Ship from a pull request</Section.Title>
16        <Section.Description>
17          Everything between git push and production, without a pipeline to maintain.
18        </Section.Description>
19        <Section.Actions>
20          <Button size="sm">Start deploying</Button>
21          <Button size="sm" variant="outline">
22            Read the docs
23          </Button>
24        </Section.Actions>
25      </Section.Header>
26      <div className="grid gap-4 sm:grid-cols-3">
27        {features.map((feature) => (
28          <div key={feature.title} className="flex flex-col gap-1">
29            <p className="text-sm font-medium">{feature.title}</p>
30            <p className="text-muted-foreground text-xs">{feature.detail}</p>
31          </div>
32        ))}
33      </div>
34    </Section>
35  );
36}

Installation

pnpm dlx nachui add section

Anatomy

1import { Section } from '@/components/ui/section';

1<Section size="lg" background="muted">
2  <Section.Header align="center">
3    <Section.Eyebrow>Platform</Section.Eyebrow>
4    <Section.Title>Ship from a pull request</Section.Title>
5    <Section.Description>Everything between git push and production.</Section.Description>
6    <Section.Actions>
7      <Button>Start deploying</Button>
8    </Section.Actions>
9  </Section.Header>
10  <FeatureGrid />
11</Section>

Section renders a section with vertical padding from size and a tone from background. By default it wraps its children in a Container, so the background runs edge to edge while the content stays on the page grid. Pass contained={false} to lay the content out yourself, or a container size such as "md" to narrow it. The header parts give every section on a landing page the same hierarchy.

Composition

Section
├── Section.Header
│   ├── Section.Eyebrow
│   ├── Section.Title
│   ├── Section.Description
│   └── Section.Actions
└── your content

Examples

Default

A feature section with a left aligned header.

Platform

Ship from a pull request

Everything between git push and production, without a pipeline to maintain.

Preview deploys

A URL for every branch, torn down on merge.

Edge caching

Static output served from 30 regions.

Rollbacks

Back to any previous build in one click.

1import { Button } from '@/components/ui/button';
2import { Section } from '@/components/ui/section';
3
4const features = [
5  { title: 'Preview deploys', detail: 'A URL for every branch, torn down on merge.' },
6  { title: 'Edge caching', detail: 'Static output served from 30 regions.' },
7  { title: 'Rollbacks', detail: 'Back to any previous build in one click.' },
8];
9
10export function Default() {
11  return (
12    <Section size="sm" background="card" className="w-full max-w-2xl rounded-xl">
13      <Section.Header>
14        <Section.Eyebrow>Platform</Section.Eyebrow>
15        <Section.Title>Ship from a pull request</Section.Title>
16        <Section.Description>
17          Everything between git push and production, without a pipeline to maintain.
18        </Section.Description>
19        <Section.Actions>
20          <Button size="sm">Start deploying</Button>
21          <Button size="sm" variant="outline">
22            Read the docs
23          </Button>
24        </Section.Actions>
25      </Section.Header>
26      <div className="grid gap-4 sm:grid-cols-3">
27        {features.map((feature) => (
28          <div key={feature.title} className="flex flex-col gap-1">
29            <p className="text-sm font-medium">{feature.title}</p>
30            <p className="text-muted-foreground text-xs">{feature.detail}</p>
31          </div>
32        ))}
33      </div>
34    </Section>
35  );
36}

Backgrounds

Each tone sets both background and foreground, so text and buttons inside stay readable.

background="default"

Text and links inherit the right foreground.

background="muted"

Text and links inherit the right foreground.

background="primary"

Text and links inherit the right foreground.

background="inverted"

Text and links inherit the right foreground.

1import { Section } from '@/components/ui/section';
2
3const tones = ['default', 'muted', 'primary', 'inverted'] as const;
4
5export function Backgrounds() {
6  return (
7    <div className="border-border flex w-full max-w-md flex-col overflow-hidden rounded-xl border">
8      {tones.map((tone) => (
9        <Section key={tone} size="sm" background={tone} contained={false} className="px-6">
10          <p className="text-sm font-medium">background="{tone}"</p>
11          <p className="text-xs opacity-70">Text and links inherit the right foreground.</p>
12        </Section>
13      ))}
14    </div>
15  );
16}

Centered

Header with align="center" and bordered on the section.

Pricing

Pay for what you deploy

Free for hobby projects. Usage-based from the first team member, with no seat minimum.

1import { Button } from '@/components/ui/button';
2import { Section } from '@/components/ui/section';
3
4export function Centered() {
5  return (
6    <Section size="md" bordered className="w-full max-w-2xl">
7      <Section.Header align="center" spacing="sm">
8        <Section.Eyebrow>Pricing</Section.Eyebrow>
9        <Section.Title>Pay for what you deploy</Section.Title>
10        <Section.Description>
11          Free for hobby projects. Usage-based from the first team member, with no seat minimum.
12        </Section.Description>
13        <Section.Actions className="justify-center">
14          <Button size="sm">Compare plans</Button>
15        </Section.Actions>
16      </Section.Header>
17    </Section>
18  );
19}

API Reference

Section

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Vertical padding
`background`	`'default' \| 'muted' \| 'card' \| 'primary' \| 'inverted'`	`'default'`	Background and matching foreground
`bordered`	`boolean`	`false`	Top and bottom border
`contained`	`boolean \| ContainerSize`	`true`	Wrap children in a `Container`, optionally with a size
`as`	`React.ElementType`	`'section'`	Element to render
`className`	`string`	-	Additional CSS classes

Section.Header

Prop	Type	Default	Description
`align`	`'start' \| 'center'`	`'start'`	Alignment of the header parts
`spacing`	`'sm' \| 'md' \| 'lg'`	`'md'`	Space below the header

Section.Title

Prop	Type	Default	Description
`as`	`'h1' \| 'h2' \| 'h3' \| 'h4'`	`'h2'`	Heading level

Section.Eyebrow, Section.Description, Section.Actions

Presentational parts. Each accepts className and the attributes of the element it renders.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousSplit

NextLogin