Component reference

DetailSection

One titled block inside a detail surface (a side panel or a full-screen reader).

Preview

Sections, timeline, and resource references

Shows the shared detail components on their own; does not simulate a work detail panel.

packages/meowtail/stories/detail-panel.stories.tsxline 14tsx

render: () => (
  <Stack>
    <DetailSection title="Section title" aside="Supporting note">
      <p>The body is provided by the caller.</p>
    </DetailSection>
    <Timeline>
      <TimelineItem
        state="success"
        title="Draft submitted"
        stateLabel="Done"
        description="09:12 · 4 files changed"
      />
      <TimelineItem
        state="returned"
        title="Review returned"
        stateLabel="Returned"
        description="Two comments need a reply before the next run."
      />
      <TimelineItem state="processing" title="Checks running" stateLabel="In progress" />
    </Timeline>
    <ResourceLink href="#sample" title="Sample link" detail="Link style" />
    <ResourceLink
      title="A very long sample resource name to observe how caller-supplied long text behaves"
      detail="Button style"
    />
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { DetailSection } from "meowtail";

<DetailSection title="Section title" aside="Supporting note">
  <p>The body is provided by the caller.</p>
</DetailSection>

API reference

Blocks are separated by a hairline; the heading is a small label, not a page title.

Props

Prop	Type	Default
`title`Required	`Child`	–
`aside`A quiet fact on the heading line, such as a count or a caveat.	`Child`	–

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

DOM parts

rootheadertitleasidebody

Registry

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