Section
The page's rhythm unit, from LAYOUT_PHILOSOPHY.md §7-8: one band that owns its vertical padding, its background tone, its transition dividers and the `<Container>` that measures its children.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/section.jsonnpx shadcn@latest add @interlace/sectionHistory
This component is at v1.2.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
2 named exports — pull the parts you need.
import { Section, sectionVariants } from '@/components/ui/section';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
Section (section by default — data-spacing / -tone / -divider)
└─ Container (always present, size from `container`)
└─ children
The wrapper element is chosen by `as` (`section | header | footer | aside |
div`), a plain string swap rather than Base UI's `render` prop. `children`
always go through a Container: there is no full-bleed escape except
`container="full"`.Variants
Closed prop unions enforced by class-variance-authority. See Storybook's Variants story for the rendered matrix.
- spacing
- tight
- comfortabledefault
- spacious
- none
- tone
- defaultdefault
- muted
- inset
- divider
- nonedefault
- top
- bottom
- both
API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
SectionProps
Also accepts every <section> attribute. Plus the variant props listed above.
| Prop | Type | Description |
|---|---|---|
| container | ContainerProps['size'] | Container size that wraps the section's children. Defaults to `content`. |
| as | 'section' | 'header' | 'footer' | 'aside' | 'div' | Render as a different element (e.g. `header`, `footer`). Default `section`. |
| children | React.ReactNode | — |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
- None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.
Examples
4 more states from the same story file.
R-rule compliance
Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.
| Rule | Concept | Where |
|---|---|---|
| R4 | Extends native el | `Omit<React.ComponentProps<'section'>, 'children'>` |
| R6 | data-slot + data-* on root | `data-slot="section"` + spacing / tone / divider |
| R7 | cva + cn + ...rest | `cn(sectionVariants({…}), className)` + `{...props}` |
| R8 | Enums, no booleans | four closed enums; no `isMuted`, no `hasDivider` |
| R12 | Reuse over wrap | width and gutters come from `Container`, not from here |
| R19 | Tokens only | `bg-card/30`, `bg-card/50`, `border-border` |
| R25 | Server component | No hooks → no `'use client'` |
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
class-variance-authority
- Registry dependencies
Source
The full implementation — components/ui/section.tsx once installed.
import * as React from 'react';
// @interlace/section v1.2.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/section
// What changed since: https://ds.interlace.tools/c/section#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — Section
*
* The page's rhythm unit, from LAYOUT_PHILOSOPHY.md §7-8: one band that owns
* its vertical padding, its background tone, its transition dividers and the
* `<Container>` that measures its children.
*
* A page is N of these, so the page file says what is IN each band and never
* what the band looks like.
*
* ## The four axes
*
* - `spacing` → vertical padding, responsive at each step
…105 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.