fma-ds

Page Header

The top of a page, composed from parts: breadcrumbs, the title with its description and actions, and an optional sub-page nav.

originalMITChangelogRegistry JSON

Overview

  • `PageHeaderBreadcrumbs`: an items trail whose last entry is the current page.
  • `PageHeaderContent`: heading on one side, actions on the other, stacked on narrow screens.
  • `PageHeaderHeading`: PageHeaderTitle (the <h1>, with an isLoading skeleton) and PageHeaderDescription. Anything that belongs beside the title, like a status select, goes inside it too.
  • `PageHeaderActions`: buttons that stretch on mobile.
  • `PageHeaderNav`: an area's sub-pages, usually a TabNav.

Wrap the app in react-aria's RouterProvider so breadcrumb and tab links route client-side.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/page-header

    Files land in components/fma-ds/page-header/page-header.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0