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 downward; releasing past closeThreshold (default 100px) dismisses the sheet, otherwise it springs back.

Props (BottomSheet)

Prop Type Default Description
open / defaultOpen / onOpenChange — — Controlled or uncontrolled open state.
modal boolean true Trap focus and lock scroll.
closeThreshold number 100 Downward drag distance (px) past which release dismisses.

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; dragging it downward dismisses 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.