Section Header

A section heading with an index, title, and meta line.

Featured

12 items

Installation

Add the section header component with the shadcn CLI.

bash

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

Usage

tsx

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

Examples

Title only

Index and meta are optional

Components

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

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

With index

Numbered section heading

Installation

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

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderIndex>02</SectionHeaderIndex>
    <SectionHeaderTitle>Installation</SectionHeaderTitle>
  </SectionHeaderContent>
</SectionHeader>

With meta

Trailing metadata on the right

Recent activity

Updated 2h ago

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

<SectionHeader>
  <SectionHeaderContent>
    <SectionHeaderTitle>Recent activity</SectionHeaderTitle>
  </SectionHeaderContent>
  <SectionHeaderMeta>Updated 2h ago</SectionHeaderMeta>
</SectionHeader>

With action

Place any control in the trailing slot

Members

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

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

Section

Heading above its content

Overview

3 items

Section content sits directly beneath the header.

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

<section className="flex flex-col gap-4">
  <SectionHeader>
    <SectionHeaderContent>
      <SectionHeaderIndex>01</SectionHeaderIndex>
      <SectionHeaderTitle>Overview</SectionHeaderTitle>
    </SectionHeaderContent>
    <SectionHeaderMeta>3 items</SectionHeaderMeta>
  </SectionHeader>
  <p className="text-pretty text-muted-foreground">
    Section content sits directly beneath the header.
  </p>
</section>