Component reference

Section

One titled region inside a page or a card surface.

Preview

Plain, card, nested and footer

The same titled region in its two presentations: a plain section in the page rhythm and a card section wrapped in the existing Card surface. A nested section steps down one heading level, and a section without identity slots is only a grouping wrapper.

packages/meowtail/stories/section.stories.tsxline 22tsx

render: () => (
  <Container width="page">
    <Container width="content">
      <Stack gap="normal">
        <Section
          title="Notifications"
          description="Choose how the project reaches you."
          actions={
            <Button variant="quiet" size="small">
              Reset
            </Button>
          }
          footer="Saved automatically when you leave the field."
        >
          <p>
            Email digests are sent once a day. The section header carries the name, one line of
            purpose and the actions for the whole region.
          </p>
        </Section>

        <Section
          title="Notification channels"
          description="A card section carries its own action row and a footer."
          variant="card"
          actions={
            <Button variant="quiet" size="small">
              Reset
            </Button>
          }
          footer={
            <Button variant="quiet" size="small">
              Manage channels
            </Button>
          }
        >
          <p>
            The card variant wraps the plain section in the existing Card surface, so the card
            keeps one visual owner and the section keeps its parts.
          </p>
          <Section title="Nested section" description="One heading level deeper inside the card.">
            <p>
              A section nested in another section renders h3; a standalone section and a section
              directly under a page both start at h2.
            </p>
          </Section>
        </Section>

        <Section>
          <p>
            A section without a title is a grouping wrapper: it renders its content only, with no
            heading, action row or footer of its own.
          </p>
        </Section>
      </Stack>
    </Container>
  </Container>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Section } from "meowtail";

<Section
  title="Notifications"
  description="Choose how the project reaches you."
  actions={
    <Button variant="quiet" size="small">
      Reset
    </Button>
  }
  footer="Saved automatically when you leave the field."
>
  <p>
    Email digests are sent once a day. The section header carries the name, one line of
    purpose and the actions for the whole region.
  </p>
</Section>

Examples

The other stories that show this component.

Long headings, descriptions and wrapped actions

The same public section under content pressure: a long heading sentence, a long description, a wrapping action row, long body copy and a long footer note at desktop and narrow widths.

packages/meowtail/stories/section.stories.tsxline 101tsx

render: () => (
  <Container width="page">
    <Container width="content">
      <Stack gap="normal">
        <Section
          title={longSectionCopy.title}
          description={longSectionCopy.description}
          actions={[
            <Button variant="quiet" size="small">
              Preview the digest
            </Button>,
            <Button variant="quiet" size="small">
              Review recipients
            </Button>,
          ]}
          footer={longSectionCopy.footer}
          variant="card"
        >
          <p>{longSectionCopy.paragraph}</p>
          <p>
            Long unbroken identifiers such as
            {` ${"notification-digest-delivery-schedule".repeat(2)} `}
            wrap inside the content column instead of widening it.
          </p>
        </Section>

        <Section
          title={longSectionCopy.title}
          description={longSectionCopy.description}
          footer={longSectionCopy.footer}
        >
          <p>{longSectionCopy.paragraph}</p>
          <Section title="A nested heading that is also a full sentence about the digest">
            <p>
              A nested section steps down one heading level and keeps the same header, action and
              footer slots.
            </p>
          </Section>
        </Section>
      </Stack>
    </Container>
  </Container>
)

API reference

Slots are fixed for the mount: presence decides whether the header or footer renders, while a Signal passed as slot content still updates the text it carries.

Props

Prop	Type	Default
`title`The section heading, rendered at the level the surrounding region grants it: h2 under `Page`, h3 where a section is nested in another section. Omitted only when the section is a pure grouping wrapper; a grouping wrapper does not consume a heading level, so its titled children keep the depth of the surrounding region.	`Child`	–
`description`One line of supporting copy under the heading.	`Child`	–
`actions`Section-level actions on the heading row; they wrap under it when it is narrow.	`Child`	–
`footer`A supporting note or action row after the content.	`Child`	–
`variantplain` keeps the page rhythm; `card` wraps the plain section in the existing Card surface. Fixed for the mount: the surface is chosen when the section mounts, so pass a new key or remount to switch variants.	`SectionVariant`	`"plain"`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootheadertitledescriptionactionscontentfooter

Registry

The component is registered as section in the meowtail component registry.