WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Layout

Page Header

LayoutPage Header
Entity HeaderScroll Area
Live props
Content
title
description
backHref
backLabel
moreLabel
Appearance
size
tone
color
border
State
loading
Layout
mobileActions
Behavior
sticky
Code
import { PageHeader } from "@/components/ui/page-header"

<PageHeader />
Pro

v1.0.0·Added in 1.0.0

The top of an admin page: breadcrumb, title with avatar and badges, description, meta, actions that fold into a menu, and tabs.

Read where you are in the breadcrumb, then act: the primary action always stays in view at the end of the row, and the others fold one by one into a ⋯ menu as the window narrows (they come back when there is room). Actions that return a promise show a spinner until they finish. Tab walks the breadcrumb, the back button, every action and the ⋯ menu (arrow keys and Enter inside it, Escape closes it). With sticky set to condensed, scroll past the header and a glass bar with the title and the primary action slides down under the top bar. On a phone (or whenever the header itself is narrower than 512px, like in a side panel) the actions move under the title: the primary stays as a small button and the rest open from ⋯, as a bottom action sheet on phones (or stack full width with mobileActions set to stack); on phones the title shrinks and a ‹ back link replaces the breadcrumb.

Add to a project

npx wingo-ui@latest add page-header

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactavatarbreadcrumbbuttondropdown-menuskeletonuse-media-queryuse-overflow-itemsuse-scroll-statemotionnavigationtonesui-config

Files

  • components/ui/page-header.tsx

See also

BreadcrumbNav TabsLarge Title HeaderTopbaruseOverflowItemshook
PreviousEntity HeaderNext Scroll Area
AAcme CRM
  1. Home
  3. Clients
  4. Tech Solutions LLC
Clients
TL

Tech Solutions LLC

ActiveVIP client
IT equipment distributor in Austin · EIN 12-3456789
  • Client since Mar 12, 2024
  • Owner: Emma Carter
  • Balance $12,480.00
  • Overview
  • Invoices12
  • Quotes3
  • Contacts
  • Files
  • Activity

/clients/tech-solutions · last action: none

Current balance$12,480.002 overdue invoices
Collected in 2026$86,240.50+18% vs 2025
Last paymentSep 18, 2026$6,049.50

Recent invoices

  • Invoice #2026-0412Sep 18, 2026
    $4,280.00Overdue
  • Invoice #2026-0398Sep 2, 2026
    $2,150.50Issued
  • Invoice #2026-0371Aug 14, 2026
    $6,049.50Paid
  • Invoice #2026-0344Jul 29, 2026
    $1,890.00Paid
  • Invoice #2026-0317Jul 10, 2026
    $3,320.00Paid

Activity

  • Emma Carter issued invoice #2026-0412

    Sep 18, 2026

  • Michael Reed sent quote #Q-2026-118

    Sep 11, 2026

  • Olivia Stone added the contact Ryan Mitchell

    Sep 5, 2026

  • Emma Carter updated the billing details

    Aug 28, 2026

Note

Usually pays in 30 days. Prefers invoices emailed to accounting@techsolutions.com with the purchase order attached. Master agreement renewed in March 2026, 5% volume discount above $20,000.00 per quarter.

Narrow the window: actions fold into ⋯ from the end. Set sticky to condensed and scroll.