Section

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/section.json

npx shadcn@latest add https://prototyper-ui.com/r/section.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/section.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/section.json

This will add the following files to your project:

• components/ui/section.tsx

Usage

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

<Section background="surface" padding="lg">
  <h2>Section heading</h2>
  <p>Section content is automatically constrained and centered.</p>
</Section>

Section wraps content in a full-bleed container with an optional background color. The inner content is automatically constrained to a maxWidth and centered with horizontal padding.

Examples

Primary Background

Narrow Content

Styling

Data Slots

Use data-slot attributes to target Section parts in CSS:

Customization Examples

/* Add a top border to surface sections */
[data-slot="section"] {
  @apply border-t border-border;
}

/* Override inner content max-width */
[data-slot="section-content"] {
  @apply max-w-3xl;
}

<Section className="border-t border-border" background="muted" padding="lg">
  Custom styled section
</Section>

API Reference

Section

A full-bleed section with constrained inner content.

Extends React.ComponentProps<"section">. All standard section props are forwarded via ...props.

sectionVariants

A cva helper exported for use outside of the <Section> component.

import { sectionVariants } from "@/components/ui/section";

<div className={sectionVariants({ background: "muted", padding: "lg" })}>
  Custom element with section styles
</div>;

Accessibility

Keyboard Interactions

Section is a non-interactive presentational container and does not have keyboard interactions.

ARIA Attributes

• Renders as a native <section> element, which is treated as a landmark by assistive technology when given an accessible name.
• Add aria-label or aria-labelledby to give the section a meaningful label for screen readers.

Related