Fluixi UI
GitHub ↗

Examples

Loading preview...

bottom-sheet

A bottom-anchored sheet with a grabber handle and drag-to-dismiss.

A headless bottom sheet built on the same overlay primitives as dialog, dismissable layer, focus trap, scroll lock. It slides up from the bottom edge and can be dragged down to dismiss via the BottomSheetHandle. For a generic edge panel use drawer.

Installation

pnpm add @fluixi-ui/bottom-sheet

Usage

import {
  BottomSheet, BottomSheetTrigger, BottomSheetPortal, BottomSheetOverlay,
  BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetTitle,
  BottomSheetBody, BottomSheetFooter, BottomSheetClose,
} from '@fluixi-ui/bottom-sheet';

<BottomSheet>
  <BottomSheetTrigger>Share</BottomSheetTrigger>
  <BottomSheetPortal>
    <BottomSheetOverlay />
    <BottomSheetContent>
      <BottomSheetHandle />
      <BottomSheetHeader>
        <BottomSheetTitle>Share</BottomSheetTitle>
      </BottomSheetHeader>
      <BottomSheetBody>...</BottomSheetBody>
      <BottomSheetFooter>
        <BottomSheetClose>Done</BottomSheetClose>
      </BottomSheetFooter>
    </BottomSheetContent>
  </BottomSheetPortal>
</BottomSheet>

Drag the handle up to grow the sheet, down to shrink it, or past the close threshold to dismiss. The sheet stays exactly where you release it (no snapping).

Props (BottomSheet)

Prop Type Default Description
open / defaultOpen / onOpenChange , , Controlled or uncontrolled open state.
modal boolean true Trap focus and lock scroll.
defaultHeight number 0.5 Fraction of the viewport height the sheet opens at.
maxHeight number 0.95 Largest fraction the sheet can grow to while dragging.
closeThreshold number 0.25 Releasing below this fraction of the viewport dismisses the sheet.

Parts

Part Description
BottomSheet Root; owns open state and drag behavior.
BottomSheetTrigger Button that opens the sheet.
BottomSheetPortal Portals overlay + content to <body> while open.
BottomSheetOverlay The backdrop.
BottomSheetContent The focus-trapped panel; follows the drag offset, dismisses on Escape / outside pointer-down.
BottomSheetHandle The grabber; drag up to grow, down to shrink or dismiss the sheet.
BottomSheetHeader / BottomSheetTitle / BottomSheetDescription Header region and accessible label/description.
BottomSheetBody Scrollable content region.
BottomSheetFooter Footer, typically actions.
BottomSheetClose Button that closes the sheet.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.