Saltar al contenido principal

Section

Secciones de página con ritmo vertical consistente, tonos de fondo y un encabezado con eyebrow, título, descripción y acciones.

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}

Instalación

pnpm dlx nachui add section

Anatomía

1import { Section } from '@/components/ui/section';
1<Section size="lg" background="muted">
2  <Section.Header align="center">
3    <Section.Eyebrow>Plataforma</Section.Eyebrow>
4    <Section.Title>Despliega desde un pull request</Section.Title>
5    <Section.Description>Todo lo que hay entre git push y producción.</Section.Description>
6    <Section.Actions>
7      <Button>Empezar a desplegar</Button>
8    </Section.Actions>
9  </Section.Header>
10  <FeatureGrid />
11</Section>
Section renderiza un section con padding vertical según size y un tono según background. Por defecto envuelve a sus hijos en un Container, así el fondo va de borde a borde mientras el contenido se queda en la grilla de la página. Pasa contained={false} para armar el contenido a tu manera, o un tamaño de container como "md" para angostarlo. Las partes del encabezado le dan a cada sección de una landing la misma jerarquía.

Composición

Section
├── Section.Header
│   ├── Section.Eyebrow
│   ├── Section.Title
│   ├── Section.Description
│   └── Section.Actions
└── tu contenido

Ejemplos

Predeterminado (Default)

Una sección de features con el encabezado alineado a la izquierda.

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}

Fondos

Cada tono define fondo y primer plano, así que el texto y los botones de adentro siguen legibles.

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}

Centrado

Header con align="center" y bordered en la sección.

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}

Referencia de API

Section

PropTipoPor defectoDescripción
size'sm' | 'md' | 'lg' | 'xl''md'Padding vertical
background'default' | 'muted' | 'card' | 'primary' | 'inverted''default'Fondo y primer plano a juego
borderedbooleanfalseBorde superior e inferior
containedboolean | ContainerSizetrueEnvuelve a los hijos en un Container, con tamaño opcional
asReact.ElementType'section'Elemento a renderizar
classNamestring-Clases CSS adicionales

Section.Header

PropTipoPor defectoDescripción
align'start' | 'center''start'Alineación de las partes del encabezado
spacing'sm' | 'md' | 'lg''md'Espacio debajo del encabezado

Section.Title

PropTipoPor defectoDescripción
as'h1' | 'h2' | 'h3' | 'h4''h2'Nivel del heading

Section.Eyebrow, Section.Description, Section.Actions

Partes de presentación. Cada una acepta className y los atributos del elemento que renderiza.
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorSplit
SiguienteLogin
Ctrl+I