npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiImport the PageSection components from the package:
import { PageSection, PageSectionWizard } from '@thrivecart/ui';Display a standalone page title
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSection pageTitle="Dashboard" />
</div>Show hierarchical navigation with breadcrumbs
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSection
breadcrumbs={[
{ label: 'Home', href: '#' },
{ label: 'Projects', href: '#' },
{ label: 'Website Redesign' },
]}
/>
</div>Add primary and secondary action buttons
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSection
pageTitle="User Management"
primaryAction={{ label: 'Add User', onClick: () => {} }}
secondaryActions={[
{ label: 'Import', onClick: () => {} },
{ label: 'Export', onClick: () => {} },
]}
otherActions={[
{ label: 'Settings', onClick: () => {} },
{ label: 'Help', onClick: () => {} },
]}
/>
</div>Add contextual actions to the last breadcrumb item
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSection
breadcrumbs={[
{ label: 'Campaigns', href: '#' },
{
label: 'Summer Sale Campaign',
actions: [
{ label: 'Rename', icon: <MdOutlineEdit />, onClick: () => {} },
{ label: 'Duplicate', icon: <MdOutlineCopyAll />, onClick: () => {} },
{ label: 'Archive', icon: <MdOutlineArchive />, onClick: () => {} },
{ label: 'Delete', icon: <MdOutlineDelete />, isDelete: true, onClick: () => {} },
],
},
]}
primaryAction={{ label: 'Save Changes', onClick: () => {} }}
/>
</div>PageSectionWizard is designed for multi-step form flows with editable titles and step indicators.
Step indicator for multi-step forms
<SidebarProvider mainNavItems={[]} config={{ defaultSecondaryOpen: false }}>
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSectionWizard
title="Create Campaign"
currentStep={1}
totalSteps={4}
steps={[
{ id: 'details', label: 'Details' },
{ id: 'content', label: 'Content' },
{ id: 'audience', label: 'Audience' },
{ id: 'review', label: 'Review' },
]}
/>
</div>
</SidebarProvider>Allow users to edit the wizard title inline
<SidebarProvider mainNavItems={[]} config={{ defaultSecondaryOpen: false }}>
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSectionWizard
title={title}
onTitleChange={setTitle}
onTitleChangeEnd={(newTitle) => console.log('Saved:', newTitle)}
titlePlaceholder="Untitled Campaign"
currentStep={0}
totalSteps={3}
steps={[
{ id: 'details', label: 'Details' },
{ id: 'content', label: 'Content' },
{ id: 'review', label: 'Review' },
]}
/>
</div>
</SidebarProvider>Click completed steps to navigate back
<SidebarProvider mainNavItems={[]} config={{ defaultSecondaryOpen: false }}>
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSectionWizard
title="Campaign Builder"
currentStep={currentStep}
totalSteps={steps.length}
steps={steps}
onStepClick={setCurrentStep}
/>
</div>
</SidebarProvider>Minimal step indicator without labels
<SidebarProvider mainNavItems={[]} config={{ defaultSecondaryOpen: false }}>
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSectionWizard
title="Setup Wizard"
currentStep={2}
totalSteps={5}
/>
</div>
</SidebarProvider>Replace step indicators with custom content
<SidebarProvider mainNavItems={[]} config={{ defaultSecondaryOpen: false }}>
<div className="w-full border border-border rounded-lg overflow-hidden">
<PageSectionWizard
title="Import Contacts"
stepsContent={
<div className="flex items-center gap-2">
<Button variant="secondary" size="sm">Cancel</Button>
<Button variant="primary" size="sm">Import 234 Contacts</Button>
</div>
}
/>
</div>
</SidebarProvider>Always provide breadcrumbs when users can navigate multiple levels deep in the hierarchy.
Show at most 1-2 primary actions. Use the overflow menu for additional actions.
The primary action should be the most important action on the page.
Use PageSectionWizard when guiding users through a sequential process.
Keep breadcrumb labels concise. Truncate if necessary.
Use one consistent page header pattern throughout your application.
| Prop | Type | Default | Description |
|---|---|---|---|
pageTitle | string | - | Standalone page title (alternative to breadcrumbs) |
breadcrumbs | PageSectionBreadcrumbItem[] | - | Array of breadcrumb items |
primaryAction | PageSectionActionItem | - | Primary CTA button configuration |
secondaryActions | PageSectionSecondaryActionItem[] | - | Secondary action buttons |
otherActions | PageSectionActionItem[] | - | Overflow menu actions |
showSidebarToggle | boolean | true | Show sidebar toggle when sidebar is collapsed |
className | string | - | Additional className |
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Wizard title |
onTitleChange | (newTitle: string) => void | - | Makes title editable when provided |
onTitleChangeEnd | (newTitle: string) => void | - | Called when title editing ends |
titlePlaceholder | string | 'Untitled' | Placeholder when title is empty |
currentStep | number | - | Current step index (0-based) |
totalSteps | number | - | Total number of steps |
steps | WizardStepItem[] | - | Array of step definitions |
onStepClick | (stepIndex: number) => void | - | Called when a step is clicked |
showSidebarToggle | boolean | true | Show sidebar toggle when sidebar is collapsed |
stepsContent | ReactNode | - | Custom content for steps area |
Navigation Landmarks
PageSection uses proper semantic HTML with navigation landmarks for breadcrumbs and heading elements for titles.
<nav> with proper ARIA labels