React Bottom Sheet Components

Dev Design Library indexes 21 React bottom sheet components from 17 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. Every library in this list targets React. 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.
• 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 React bottom sheet components

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

Related categories

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