Saasflare UI
Components

Page Header

Page header block with breadcrumbs, title, description, and an action slot for primary buttons.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/page-header.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { Button, PageHeader } from "@saasflare/ui"/** A page header with title, description, and an action button. */export function Demo() {    return (        <PageHeader            className="w-full"            title="Team Settings"            description="Manage your team members and their permissions."            actions={<Button>Invite member</Button>}        />    )}

With Breadcrumbs

Loading…
"use client"import {    Breadcrumb,    BreadcrumbItem,    BreadcrumbLink,    BreadcrumbList,    BreadcrumbPage,    BreadcrumbSeparator,    Button,    PageHeader,} from "@saasflare/ui"/** A page header with breadcrumbs and multiple actions. */export function Demo() {    return (        <PageHeader            className="w-full"            breadcrumbs={                <Breadcrumb>                    <BreadcrumbList>                        <BreadcrumbItem>                            <BreadcrumbLink href="#">Settings</BreadcrumbLink>                        </BreadcrumbItem>                        <BreadcrumbSeparator />                        <BreadcrumbItem>                            <BreadcrumbPage>Billing</BreadcrumbPage>                        </BreadcrumbItem>                    </BreadcrumbList>                </Breadcrumb>            }            title="Billing"            description="Manage your subscription and payment methods."            actions={                <>                    <Button variant="outline">Cancel plan</Button>                    <Button>Upgrade</Button>                </>            }        />    )}

API Reference

Prop

Type

On this page