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

App Shell

LayoutApp Shell
AccordionCard
Live props
Appearance
variant
State
defaultCollapsed
defaultMobileOpen
Behavior
collapsible
persistKey
resizable
edgeSwipe
shortcut
Layout
defaultSidebarWidth256px
mobileBreakpoint
mobileDrawerSize
Content
skipLinkLabel
mainId
Code
import { AppShell } from "@/components/ui/app-shell"

<AppShell />
Pro

v1.0.0·Added in 1.0.0

The whole admin layout in one component: a collapsible, resizable sidebar, a top bar and the page; a drawer and a tab bar on phones.

On desktop the sidebar sits beside the page: press Mod+B (Cmd on a Mac, Ctrl elsewhere), the top bar's panel button or the sidebar's collapse button to fold it into a 64px icon rail (or, with collapsible="offcanvas", to slide it out completely); the width animates and the state is remembered in a cookie. With resizable, drag the sidebar's edge between 200 and 400px (the width follows the pointer and is saved on release), drag it below 120px to snap to the rail, double-click it to reset, or focus it with Tab and use Left / Right (16px), Home (rail), End (widest) and Enter (fold / unfold). Below the breakpoint the sidebar becomes a drawer: the top bar's menu button or Mod+B opens it, it closes on navigation, on Escape, on a tap on the dimmed page or by swiping it back, and focus returns to the menu button; with edgeSwipe a swipe from the start edge opens it too. The bottom tab bar shows on phones only. Tab once from the top of the page to reveal "Skip to content", which jumps straight to the page.

Add to a project

npx wingo-ui@latest add app-shell

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

Dependencies

sidebartopbarbottom-tab-barsheetnavigationuse-controllable-stateuse-media-queryuse-persisted-stateuse-scroll-stateuse-shortcutmotionui-config

Files

  • components/ui/app-shell.tsx

See also

SidebarTopbarBottom Tab BarSheetNavigationlib
PreviousAccordionNext Card
Skip to content
  • Home
  • Inbox4
Sales
  • Clients
  • Quotes12
  • Invoices
Operations
  • Products
  • Orders
  • Reports
Account
  • Settings
  • Help
HomeHome
SS

Good morning, Anna

Here is how September looks for North Studio LLC.

New invoice

Revenue in September

$184,230.00

+12% vs August

Overdue invoices

3 · $24,180.00

2 due in 7 days

New clients

18

+5 vs August

Open quotes

12

worth $96,400.00

Recent activity

  • Michael Hayes issued invoice #2026-0412 to Northwind Tech Inc.

    today, 10:24 AM

  • Jessica Dunn sent quote #Q-2026-118 to Summit Logistics

    today, 9:10 AM

  • Ellen Stone added the client Green House Realty

    yesterday, 5:42 PM

  • Ryan Martin scheduled a demo with Keystone Construction

    yesterday, 11:05 AM

  • Maria Thomas marked #2026-0409 as paid

    Sep 22, 2026

This preview uses height="full" scroll="content" so the app scrolls inside the frame; on a site keep the defaults (the window scrolls). Mod+J opens the palette here, the showcase keeps Mod+K.

collapsed
false
drawer
closed
width
256px
toggle
CtrlBControl B
breakpoint
md
drawer size
320px
edge swipe
off
cookies
app-shell-collapsed, app-shell-width
  • Home
  • Clients
  • 4Inbox
  • Profile