default
muted
brand
gradient
gradient-primary
gradient-brand
<Section.Root spacing="md" background="muted">
<Container>…</Container>
</Section.Root>Section owns the band, Container owns the reading width. Nest them rather
than putting padding on either one.
API
| Prop | Type | Default | |
|---|---|---|---|
background | "brand" | "default" | "gradient" | "gradient-brand" | "gradient-primary" | "muted" | — | Surface behind the section. The three gradients read as brand moments —
one per page is usually enough. brand also flips the foreground to
brand-foreground. |
spacing | "lg" | "md" | "none" | "sm" | "xl" | — | Vertical padding, which grows at md and up. Phones get about 40% less
than desktop: two stacked bands at the desktop rhythm leave 150-250 px
of blank between sections. none when the section supplies its own
rhythm. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <section> prop. Source: landing/components/section.tsx.