SectionHeader

Code

import { SectionHeader } from "@fadymondy/nasaq/web";export function Essentials() {  return <SectionHeader title="Essentials" description="The apps most businesses install first." />;}

Typography · beta

Live examples and controls: SectionHeader in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/section-header.json

The heading row of a page section. It shows a title, an optional line of description and an optional action at the inline end ("See all", a toggle). Sections are separated by whitespace and this header, not by wrapping each one in a bordered card.

When to useCopy Anchor Link

• Above a shelf, table or list on a page with several sections.
• When a section needs a "See all" link or a small toggle beside the title.

When not to useCopy Anchor Link

• The title of the page itself with primary actions: use PageActions and page-level layout.
• Titles inside a card or dialog: use those components' own header parts.
• Plain body text: use Text.

ImportCopy Anchor Link

import { SectionHeader } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { SectionHeader } from "@fadymondy/nasaq/web";

export function Essentials() {
  return <SectionHeader title="Essentials" description="The apps most businesses install first." />;
}

AnatomyCopy Anchor Link

SectionHeader                data-slot="section-header"   <div>, flex, items-end, justify-between
├─ text
│  ├─ heading                <h2> (as), optional id (headingId)
│  └─ description            <p>
└─ action                    inline end

APICopy Anchor Link

SectionHeaderCopy Anchor Link

SectionHeaderProps extends Omit<ComponentProps<"div">, "title">. Remaining props go to the outer <div>.

ExamplesCopy Anchor Link

With a "See all" actionCopy Anchor Link

import { Button, SectionHeader } from "@fadymondy/nasaq/web";
import { ArrowRight } from "lucide-react";

export function Featured() {
  return (
    <SectionHeader
      title="Essentials"
      description="The apps most businesses install first."
      action={
        <Button variant="link" size="sm">
          See all <ArrowRight className="rtl:-scale-x-100" />
        </Button>
      }
    />
  );
}

Labelled section, ArabicCopy Anchor Link

import { Button, SectionHeader } from "@fadymondy/nasaq/web";

export function Essentials() {
  return (
    <section aria-labelledby="essentials-title" className="flex flex-col gap-5">
      <SectionHeader
        headingId="essentials-title"
        title="الأساسيات"
        description="التطبيقات التي تثبّتها معظم الأعمال أولاً."
        action={<Button variant="link" size="sm">عرض الكل</Button>}
      />
    </section>
  );
}

AccessibilityCopy Anchor Link

• Renders a real heading. Pick as so levels stay in order (one h1 per page).
• Give the heading an id with headingId and point the <section> at it with aria-labelledby.
• The container has no role; the action keeps its own semantics.

• Localise title, description and the action label.

RTL & i18nCopy Anchor Link

• The action sits at the inline end (left in RTL) through flex; nothing else needs changing.
• Directional icons in the action need rtl:-scale-x-100.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Heading: text-h2 text-foreground. Description: text-body-sm text-muted-foreground.
• Target with [data-slot=section-header].
• Extend with className (for example spacing). Do not restyle the heading with raw hex.

Do / Don'tCopy Anchor Link

• Do separate sections with whitespace and a SectionHeader.
• Do keep the description to one line.
• Don't wrap each section in a bordered card.
• Don't put a primary button in action; use a link or ghost button. One primary per view.
• Don't pick as for its size; the look is the same at every level.

RelatedCopy Anchor Link

• ProductCard · Text · PageActions · Card

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-typography-section-header--docs