Yami

Section Header

A section heading with a title and optional meta line.

What is Yami UI?

Installation

Add the section header component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/section-header.json

Usage

import {
  SectionHeader,
  SectionHeaderContent,
  SectionHeaderTitle,
} from "@/components/ui/section-header"

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderTitle>What is Yami UI?</SectionHeaderTitle>
  </SectionHeaderContent>
</SectionHeader>

Examples

Title only

Meta is optional

Components

Code

import {
  SectionHeader,
  SectionHeaderContent,
  SectionHeaderTitle,
} from "@/components/ui/section-header"

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderTitle>Components</SectionHeaderTitle>
  </SectionHeaderContent>
</SectionHeader>

With meta

Trailing metadata on the right

Caption utility

Optional

Code

import {
  SectionHeader,
  SectionHeaderContent,
  SectionHeaderMeta,
  SectionHeaderTitle,
} from "@/components/ui/section-header"

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderTitle>Caption utility</SectionHeaderTitle>
  </SectionHeaderContent>
  <SectionHeaderMeta>Optional</SectionHeaderMeta>
</SectionHeader>

With action

Place any control in the trailing slot

Members

Code

import { Button } from "@/components/ui/button"
import {
  SectionHeader,
  SectionHeaderContent,
  SectionHeaderTitle,
} from "@/components/ui/section-header"

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderTitle>Members</SectionHeaderTitle>
  </SectionHeaderContent>
  <Button size="sm" variant="outline">Invite</Button>
</SectionHeader>

Section

Heading above its content

Design system overview

Section content sits directly beneath the header.

Code

import {
  SectionHeader,
  SectionHeaderContent,
  SectionHeaderTitle,
} from "@/components/ui/section-header"

<section className="flex flex-col gap-4">
  <SectionHeader>
    <SectionHeaderContent>
      <SectionHeaderTitle>Design system overview</SectionHeaderTitle>
    </SectionHeaderContent>
  </SectionHeader>
  <p className="text-pretty text-base leading-[1.7] text-muted-foreground">
    Section content sits directly beneath the header.
  </p>
</section>