Bottom Sheet Components

Dev Design Library indexes 22 bottom sheet components from 18 open-source UI libraries, with the most coming from ZAYX, Arc Library, React Spectrum, Intent UI and Rare UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Bottom sheet components belong to the Overlays group.

• SheetHeroUI · ReactSwipeable overlay with native scroll snapping, partial positions, and nested sheets
• Tailwind SheetReact Spectrum · React
• Drawercoss ui · ReactA panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
• Base Ui Floating SheetLobe UI · React
• Smooth DrawerKokonut UI · ReactCheckout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
• drawerIntent UI · Reactdrawer
• Bottom SheetbeUI · ReactVaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
• Family DrawerRare UI · ReactA bottom drawer with smooth, morphing transitions between stacked views, inspired by the Family app. Built on Vaul.
• Share SheetVengeance UI · ReactAnimated share dialog with direct sharing, copy-link feedback, and a downloadable QR code
• Bottom SheetPanel UI · React NativeDraggable sheet anchored to the bottom of the screen.
• Drag To DismissKinetics · HTML/CSSPointer-tracked drag, snaps back or flies off past threshold
• Bottom sheetArc Library · ReactA sheet that rests at a peek or full height and follows your finger.
• SheetUI Lab · ReactDrag it down or flick it away; pull it up and it pushes back.
• DrawerROI UI · ReactA panel that slides in from the edge of the screen with swipe-to-dismiss gestures.
• Currency SwitchZAYX · React Native
• DrawerD2Studio UI · ReactA drawer component that slides in from the bottom or sides of the screen.
• DrawerEaseUI · ReactSheet that slides up from the bottom edge on the native dialog element. Drag the handle down, or flick it, to dismiss.
• Glass SheetOpaline · ReactFloating side sheet, or a drag-to-dismiss bottom drawer with side="bottom".
• Vanilla SheetReact Spectrum · React
• sheetIntent UI · Reactsheet
• User menuArc Library · ReactYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
• Fin PanelZAYX · React Native

Libraries with bottom sheet components

• ZAYX
• Arc Library
• React Spectrum
• Intent UI
• Rare UI

Related categories

• React Bottom Sheet Components
• Tailwind CSS Bottom Sheet Components
• Animated Bottom Sheet Components
• Overlay Components
• Modal Components
• Popover Components
• Tooltip Components
• Toast Components
• Drawer Components
• Hover Card Components
• Alert Dialog Components
• Dynamic Island Components
• Tour Components
• Lightbox Components
• Cookie Banner Components
• Mini Player Components