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.jsonpnpm add @saasflare/uiUsage
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