Skip to content
WingoUI
ComponentsTemplatesDocsPricingAI agentsBlogChangelogContact
Components
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCountry SelectCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerEmail InputEmoji PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime PickerTimezone SelectTree Select
Forms
Address InputBooking WidgetCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverShare DialogSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSetup ChecklistSkeletonSpinnerToast
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 chartRadar chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX EditorDOCX ViewerExcel ViewerFile SystemImage compareImage CropperImage GalleryImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadChat WidgetConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Background PatternGravity LettersMarqueeTerminalText AnimateText Rotate
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
Marketing Sections
App Download SectionBlog Cards SectionCTA SectionFAQ SectionFeature GridFeature ShowcaseHero SectionIntegrations SectionLogo CloudMarketing FooterMarketing HeaderMarketing SectionNewsletter SectionPricing SectionStats SectionSteps SectionTeam SectionTestimonials SectionTimeline SectionVideo Section
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAPI Keys PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowOrder History PagePost Listing WizardPricing PageProfile PageRegister PageSettings PageUsers Admin Page
Templates
About PageAcademy PageAccessibility PageAffiliate PageAgency PageAI Product PageAppointment Booking PageBlog PageBlog Post PageBug Bounty PageCareers PageChangelog PageCommunity PageCompare PageContact PageCustomer Story PageCustomers PageDemo Booking PageDevelopers PageDocs Home PageDownload PageEnterprise PageEvents PageExperts PageFAQ PageFeature PageGlossary PageHelp Article PageHelp Center PageHome Services PageImpact PageIntegration Detail PageIntegrations PageJob Detail PageLanding PageLaunch PageLegal PageManifesto PagePortfolio PagePress PageProduct Tour PagePromo PageReal Estate PageReferral PageResearch Report PageRestaurant PageRoadmap PageROI Calculator PageSecurity PageSolutions PageStartups PageStatus PageStorefront PageSwitch PageTemplate Gallery PageTravel PageWaitlist PageYear in Review Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Overlays

Family Drawer

Overlays

Family Drawer React component for Tailwind CSS v4

Beta
Dropdown MenuHover Card
Live props
Content
triggerLabel
title
closeLabel
defaultView
Appearance
size
radius36px
accent
danger
surface
showCloseButton
Behavior
dismissible
State
defaultOpen
Code
import FamilyDrawer from "@/components/ui/family-drawer"

<FamilyDrawer />
  1. Home
  2. Components
  3. Overlays
  4. Family Drawer
FreeBeta

Family Drawer React component for Tailwind CSS v4

v1.0.1·Updated in 1.2.1

A React bottom drawer that floats above the page and morphs its height between stacked views, inspired by the Family app.

Press the trigger to open a floating bottom drawer with an Options menu. Pick an option and the drawer morphs into that view: its height eases to fit the new content while the old view fades and shrinks away and the new one scales in, with the crossfade timed to how far the height has to travel. Cancel, Reveal or Continue step back to the menu. Drag the drawer down, tap the backdrop, press Escape or use the close button to dismiss it. Buttons press in on tap.

Family Drawer is a free React component in the React overlay components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add family-drawer, together with UIProvider and the npm packages clsx, motion, react-use-measure and vaul.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add family-drawer

Usage

Import FamilyDrawer from @/components/ui/family-drawer.

import FamilyDrawer from "@/components/ui/family-drawer"

export function Demo() {
  return <FamilyDrawer triggerLabel="Wallet options" />
}

// your own views: each one can morph to another view or close the drawer
// <FamilyDrawer
//   triggerLabel="Delete project"
//   views={{
//     default: ({ setView }) => <button onClick={() => setView("confirm")}>Delete</button>,
//     confirm: ({ close }) => <button onClick={close}>Yes, delete it</button>,
//   }}
// />

Props

  • triggerLabeldefault "Try it out"
    string

    Text on the built-in trigger button. Ignored when you pass your own trigger.

  • titledefault "Options"
    string

    Heading of the built-in menu view, also the drawer's accessible name.

  • closeLabeldefault "Close"
    string

    Accessible name of the round close button.

  • defaultViewdefault "default"
    string

    The view shown first. The built-in views are default, key, phrase and remove; with your own views, any key of views.

  • sizedefault "md"
    "sm" | "md" | "lg"

    Maximum width of the drawer: 320px (sm), 361px (md) or 420px (lg). It always keeps a 16px margin on phones.

  • radiusdefault 36
    number

    Corner radius of the drawer in pixels.

  • accentdefault "#4DAFFF"
    string

    Fill of the primary action in the built-in views (Reveal).

  • dangerdefault "#FF3F40"
    string

    Any CSS color for the destructive action in the built-in views: the Remove Wallet row (tinted to 12%) and the Continue button.

  • surfacedefault ""
    string

    Any CSS color for the drawer panel. Empty uses #FEFFFE light and the popover token dark. The built-in views keep the theme's text and button colors, so pick a surface that suits the theme (or restyle your own views).

  • showCloseButtondefault true
    boolean

    Shows the round close button in the top right corner (32px, with a 44px hit area on touch screens).

  • dismissibledefault true
    boolean

    Lets a downward drag, a backdrop tap or Escape close the drawer. Turn it off to require the close button or an action inside a view.

  • defaultOpendefault false
    boolean

    Starts open when uncontrolled. Ignored when open is set.

  • open
    boolean

    Controlled open state. Pass it with onOpenChange to drive the drawer yourself.

  • onOpenChange
    (open: boolean) => void

    Called with the next open state from the trigger, the close button, a drag, the backdrop or Escape.

  • trigger
    ReactNode

    Your own trigger element, rendered as the drawer trigger through asChild. Replaces the built-in button.

  • views
    Record<string, ReactNode | ((api: { view, setView, close }) => ReactNode)>

    Your own views keyed by name, replacing the built-in wallet views. A function receives setView to morph to another view and close to dismiss the drawer.

  • onViewChange
    (view: string) => void

    Called with the name of the view the drawer morphs to.

  • className
    string

    Extra classes merged onto the drawer panel, for example a different surface color.

Parts

  • DefaultView

    component

    The built-in Options menu: a title row and three option buttons that switch to the key, phrase and remove views.

    • setView*
      (view: string) => void

      Switches the drawer to another view.

    • titledefault "Options"
      string

      The heading.

    • dangerdefault "#FF3F40"
      string

      Color of the Remove Wallet row.

  • Key

    component

    The built-in Private Key view: header, three safety notes, Cancel and Reveal.

    • setView*
      (view: string) => void

      Both buttons switch back to the default view.

    • accentdefault "#4DAFFF"
      string

      Fill of the Reveal button.

  • Phrase

    component

    The built-in Secret Recovery Phrase view, laid out like Key.

    • setView*
      (view: string) => void

      Both buttons switch back to the default view.

    • accentdefault "#4DAFFF"
      string

      Fill of the Reveal button.

  • RemoveWallet

    component

    The built-in confirmation view: a warning header with Cancel and Continue.

    • setView*
      (view: string) => void

      Both buttons switch back to the default view.

    • dangerdefault "#FF3F40"
      string

      Fill of the Continue button.

  • Header

    component

    The icon, title and description block at the top of a detail view. Use it in your own views to match.

    • icon*
      ReactNode

      The 48px icon above the title.

    • title*
      ReactNode

      The 22px heading.

    • description*
      ReactNode

      The muted paragraph under it.

  • Button

    component

    A 48px gray menu row with an icon and a label, as in the Options view.

    • children*
      ReactNode

      An icon and the label.

    • onClick
      () => void

      Called on press.

  • SecondaryButton

    component

    A 48px pill button for the actions at the bottom of a view; color it with className or style.

    • children*
      ReactNode

      The label, optionally with an icon.

    • onClick
      () => void

      Called on press.

    • className
      string

      Extra classes, e.g. the fill and text color.

    • style
      CSSProperties

      Inline styles, e.g. a backgroundColor.

  • LockIcon

    component

    The 24px lock glyph of the View Private Key row. It takes no props, like the other stock glyphs below.

  • PhraseIcon

    component

    The 24px glyph of the View Recovery Phrase row.

  • WarningIcon

    component

    The 21px warning glyph of the Remove Wallet row.

  • RecoveryPhraseIcon

    component

    The 48px header icon of the Private Key and Recovery Phrase views.

  • DangerIcon

    component

    The 48px red header icon of the Remove Wallet confirmation.

  • ShieldIcon

    component

    The 24px shield glyph of the first safety note in the detail views.

  • PassIcon

    component

    The 24px glyph of the second safety note in the detail views.

  • BannedIcon

    component

    The 24px glyph of the third safety note in the detail views.

  • FaceIDIcon

    component

    The 20px Face ID glyph inside the Reveal button.

  • CloseIcon

    component

    The 12px cross inside the round close button.

  • CrossIcon

    component

    A 12px cross glyph, a spare for your own dismiss buttons.

  • FamilyDrawerApi

    type

    What a view function receives: { view, setView, close }.

  • FamilyDrawerView

    type

    A view: plain content, or (api: FamilyDrawerApi) => ReactNode to switch views or close the drawer.

Examples

Confirm a destructive action

Your own views with Header, DangerIcon and SecondaryButton: Delete morphs into a done state, Cancel closes.

Share menu with your own trigger

trigger replaces the built-in button; the stock Button rows make a share menu that morphs into a confirmation.

Controlled

open and onOpenChange drive it from your state; onViewChange reports each view, here with a green accent and the lg width.

Dependencies

clsxmotionreact-use-measurevaului-config

Files

  • components/ui/family-drawer.tsx

FAQ

Is the React Family Drawer component free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Family Drawer?

Run npx wingo-ui@latest add family-drawer. It also adds the Wingo UI item it builds on (UIProvider) and the npm packages clsx, motion, react-use-measure and vaul. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/family-drawer.json.

See also

DrawerSheetAction SheetAlert DialogDialog

More React overlay components

Hover CardPopoverShare DialogShortcuts DialogTourTooltip
All 13 React overlay components

Articles using this component

  • React Bottom Sheet for the Web: Snap Points, Drag, Keyboard

    Mobile UI in React · Oct 9, 2026 · 9 min read

Credits

  • •Inspired by the Family app (family.co)
PreviousDropdown MenuNext Hover Card

Opens a floating sheet. Drag it down, press Escape or click outside to close.