API Reference

Complete reference of all components, props, and types.

BottomSheet.Root

The root provider. All other components must be nested inside it.

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state
`defaultOpen`	boolean	false	Uncontrolled initial state
`onOpenChange`	(open: boolean) => void	—	Called when state changes
`snapPoints`	(number \| string)[]	—	Snap positions
`activeSnapPoint`	number \| string \| null	—	Controlled snap point
`onActiveSnapPointChange`	(snap) => void	—	Called on snap change
`snapToSequentialPoint`	boolean	false	Step-by-step snapping
`fadeFromIndex`	number	last	Overlay fade start index
`modal`	boolean	true	Enable overlay + focus trap
`dismissible`	boolean	true	Allow drag/ESC/overlay close
`handleOnly`	boolean	false	Drag only from Handle
`floating`	boolean	false	Floating detached mode
`progressiveOverlay`	boolean	false	Overlay follows drag
`progressiveOverlayMaxOpacity`	number	0.35	Max overlay opacity
`closeThreshold`	number	0.25	Fraction to trigger close
`noBodyStyles`	boolean	false	Skip body modifications
`container`	HTMLElement \| null	body	Portal container
`repositionInputs`	boolean	true	iOS keyboard repositioning
`onDrag`	(e, percent) => void	—	Called during drag
`onDragStart`	() => void	—	Drag started
`onDragEnd`	() => void	—	Drag ended
`onRelease`	(e, open) => void	—	Pointer released
`onAnimationEnd`	(open) => void	—	After animation completes
`onClose`	() => void	—	Sheet closed

BottomSheet.NestedRoot

Same props as Root. Use for sheets inside other sheets.

BottomSheet.Content

The sheet container. Renders as a <div role="dialog">. Accepts all standard div attributes.

Data attributes

Attribute	Values
`data-state`	"open" \| "closed"
`data-snap-points`	"true" \| "false"
`data-floating`	"true" \| "false"
`data-animate`	"true" \| "false"

CSS variable

--snap-point-height — the current snap point height in pixels.

BottomSheet.Overlay

Backdrop overlay. Standard div attributes.

BottomSheet.Handle

Prop	Type	Default	Description
`preventCycle`	boolean	false	Disable tap-to-cycle

BottomSheet.Portal

Prop	Type	Default	Description
`container`	HTMLElement \| null	from Root	Custom portal target
`forceMount`	boolean	false	Keep mounted when closed

BottomSheet.Trigger

Button that opens the sheet. Standard button attributes.

BottomSheet.Close

Button that closes the sheet. Standard button attributes.

BottomSheet.Title

Renders <h2>. Linked via aria-labelledby.

BottomSheet.Description

Renders <p>. Linked via aria-describedby.

BottomSheet.FloatingBar

Prop	Type	Default	Description
`gap`	number	16	Space above sheet (px)
`hideWhileDragging`	boolean	false	Hide during drag
`fadeStartPercent`	number	50	Start fade %
`fadeEndPercent`	number	65	End fade %

useBottomSheet()

Hook to access sheet state and controls from any child component.

const {
  isOpen,              // boolean — sheet is open
  isDragging,          // boolean — user is dragging
  isFullyOpen,         // boolean — at highest snap point
  isMinimized,         // boolean — at lowest snap point
  isClosed,            // boolean — not visible
  activeSnapPoint,     // SnapPoint | null
  activeSnapPointIndex,// number | null
  snapPoints,          // SnapPoint[] | undefined
  modal,               // boolean
  floating,            // boolean
  close,               // () => void
  open,                // () => void
  snapTo,              // (snapPoint: SnapPoint) => void
} = useBottomSheet();

Types

type SnapPoint = number | string;
// number: 0–1 fraction of viewport (0.5 = 50vh)
// string: pixel value ("200px")

CSS Custom Properties

:root {
  --glidesheet-z-index: 50;
  --glidesheet-floating-radius: 1rem;
}