Patterns

Page header

Rate plans

What each vehicle class pays, per facility.

page-header.tsx

"use client";

import { Button, PageHeader } from "@waveinno/ui";
import { Plus } from "lucide-react";

export default function PageHeaderExample() {
  return (
    <PageHeader
      crumbs={[{ label: "Pricing", href: "#" }, { label: "Rate plans" }]}
      title="Rate plans"
      description="What each vehicle class pays, per facility."
      primary={
        <Button variant="primary">
          <Plus /> New plan
        </Button>
      }
    />
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Button, PageHeader } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<PageHeader>

src/components/patterns/page-header.tsx

Prop	Type	Default
`crumbs`	`Crumb[]`	—
`title`required	`string`	—
`description`	`string`	—
`secondary`	`React.ReactNode`	—
`primary`	`React.ReactNode`	—
`className`	`string`	—

<Button>

src/components/ui/button.tsx

Prop	Type	Default	Description
`asChild`	`boolean`	`false`
`loading`	`boolean`	—

Also takes ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>.

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui