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

Detail Layout

LayoutDetail Layout
CollapsibleEntity Header
Live props
Layout
asidePosition
asideWidth360px
breakpoint
mobileAside
maxWidth
Behavior
asideSticky
stickyHeader
Appearance
gap
sectionVariant
State
loading
defaultTab
Code
import { DetailLayout } from "@/components/ui/detail-layout"

<DetailLayout />
Pro

v1.0.0·Added in 1.0.0

The page grid of a record (a client, a contact, an invoice): header, a main column of sections and a side panel, plus the section card.

Read a record the way it is built: the header on top, the main sections (activity, notes, invoices) on the left and the side panel (details, contacts, files) beside them once the layout itself is wide enough (960px of content), which sticks while the long column scrolls and scrolls on its own when it is taller than the screen. Below the breakpoint the panel moves under the main column, above it, or into a second tab: a full-width segmented control that sticks under the top bar, where a tap (or Tab then the arrow keys) switches panes with a short fade and both panes keep their scroll and state. Every section card has a title with a count, a pencil to edit and a ⋯ menu (an action sheet on phones); a collapsible section opens and closes from anywhere on its header row, with a mouse, a tap, or Enter / Space on the focused title, and its chevron turns. Loading sections show skeleton lines and fade into their content; empty ones show a small empty state with an action. Tab order is always header, main, side panel.

Add to a project

npx wingo-ui@latest add detail-layout

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

Dependencies

motionlucide-reactbadgebuttoncollapsibledropdown-menuempty-statesegmented-controlskeletonuse-controllable-statemotionui-config

Files

  • components/ui/detail-layout.tsx

See also

Entity HeaderCardCollapsibleSplit ViewContact card
PreviousCollapsibleNext Entity Header
AAcme CRM
  1. Clients
  2. Tech Solutions Inc.
Clients
TI

Tech Solutions Inc.Tech Solutions Inc.

Client · CompanyActiveVIP
Balance
$12,480
Owner
Emma Carter
Tax ID
12-3456789
City
Chicago
Client since
Mar 12, 2024
Last invoice
Sep 18, 2026
  • Overview
  • Invoices12
  • Quotes3
  • Contacts4
  • Files
  • Activity

breakpoint: lg · aside: sticky, 360px · phone: aside below, tab main · header: scrolls · last: none

Activity8

09/24/2026
  1. Invoice #2026-0412 issued
    09/24/2026, 4:35 PM
    $7,271.42 · due Oct 24, 2026
  2. Call with Daniel Brooks
    09/24/2026, 11:20 AM
    14 min · wants 5 more licenses from October
09/23/2026
  1. Email sent: Quote Q-2026-118
    09/23/2026, 3:05 PM
    CRM licenses, 25 users · $18,000
  2. Note: @Liam Walker takes over the e-invoicing integration
    09/23/2026, 9:40 AM
09/19/2026
  1. Payment received
    09/19/2026, 10:12 AM
    $6,049.50 for invoice #2026-0371
09/17/2026
  1. Meeting at the client's office
    09/17/2026, 1:00 PM
    Reports module demo, 233 S Wacker Dr
09/12/2026
  1. New contact: Laura Price
    09/12/2026, 8:55 AM
    Chief accountant
09/02/2026
  1. Master agreement renewed
    09/02/2026, 12:30 PM
    5% volume discount above $20,000 a quarter

Notes2

  1. Liam Walker09/23/2026, 10:05 AM
    They usually pay in 30 days. Invoices go by email to accounting, with the purchase order attached. @Emma Carter should we send them through e-invoicing too?
  2. Emma Carter09/23/2026, 11:42 AM
    Yes, from October everything goes through e-invoicing. I also saved Laura Price as the contact for confirmations.
    👍2
CtrlEnterControl Enterto send

Invoices12

Tech Solutions Inc. invoices
InvoiceIssuedDueTotalStatus
Sep 24, 2026Oct 24, 2026$7,271.42Issued
Sep 2, 2026Oct 2, 2026$2,150.50Unpaid
Aug 14, 2026Sep 13, 2026$6,049.50Paid
Jul 29, 2026Aug 28, 2026$1,890.00Paid
  • Issued
    Sep 24, 2026
    Due
    Oct 24, 2026
    Total
    $7,271.42
    Status
    Issued
  • Issued
    Sep 2, 2026
    Due
    Oct 2, 2026
    Total
    $2,150.50
    Status
    Unpaid
  • Issued
    Aug 14, 2026
    Due
    Sep 13, 2026
    Total
    $6,049.50
    Status
    Paid
  • Issued
    Jul 29, 2026
    Due
    Aug 28, 2026
    Total
    $1,890.00
    Status
    Paid
View all (12)

Details

Tax ID
12-3456789
Registration
DE-5512345
Address
233 S Wacker Dr, Chicago, IL 60606
IBAN
GB29 NWBK 6016 1331 9268 19
Payment terms
30 days

Contacts3

DB

Daniel Brooks

Head of procurement

LP

Laura Price

Chief accountant

SP

Sam Porter

IT manager

3

Contract 2026.pdf471 KB·09/02/2026, 12:30 PM·Ryan Brooks
Quote Q-2026-118.pdf248 KB·09/23/2026, 3:05 PM·Emma Carter
Logo.png84 KB·03/12/2026, 9:10 AM·Emma Carter