Animated Drawer Components

Dev Design Library indexes 36 Animated drawer components from 23 open-source UI libraries, with the most coming from Arc Library, Cult UI, uselayouts, ZAYX and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the drawer components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Drawer components belong to the Overlays group.

• DrawerChakra UI · ReactUsed to render a content that slides in from the side of the screen.
• DrawerHeroUI · ReactSlide-out panel for supplementary content and actions
• Family DrawerCult UI · ReactA multi-view drawer component with smooth animations, view navigation, and customizable content views
• Panel Revealtransitions.dev · HTML/CSS
• Floating SheetLobe UI · React
• Contact SheetKokonut UI · ReactPick from a shoot the way photographers do. Circle a frame in china marker, click again to strike it, and look through…
• 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.
• Animated DrawerSpectrum UI · Reactcomponent for the Animated Drawer
• Share SheetVengeance UI · ReactAnimated share dialog with direct sharing, copy-link feedback, and a downloadable QR code
• Mobile DrawerFluid Functionalism · ReactSlide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor.
• DrawerPanel UI · React NativeA panel that comes in from an edge of the screen and covers the app until dismissed.
• Curve Draweruselayouts · ReactSide drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.
• 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.
• DrawerHextaUI · ReactA panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers…
• Motion DrawerCojeev UI · ReactA reference-faithful edge drawer, floating quick panel, layered workspace and bottom action tray.
• Currency SwitchZAYX · React Native
• Liquid DrawerLiquefy UI · ReactDrawer panel sliding from the edge, in liquid glass style. Gaveta lateral em estilo vidro líquido.
• 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".
• DrawerReactFrame · ReactAn accessible slide-in drawer from any of 4 sides with a backdrop, focus trap, Escape and backdrop close, scroll lock…
• Side PanelCult UI · ReactSliding side panel component with customizable positioning and animations
• Smooth DrawerKokonut UI · ReactCheckout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
• sheetIntent UI · Reactsheet
• DrawerbeUI · ReactSide panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
• DrawerVengeance UI · React
• Mobile DrawerFluid Functionalism · ReactSlide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.
• Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
• DrawerArc Library · ReactA temporary side surface for focused work.
• Stacked DrawerUI Lab · ReactStacks iOS sheets that push the page back and drag down to dismiss.
• SheetHextaUI · ReactA panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
• SidebarCojeev UI · ReactA paper folio, a readable compact index and a motion drawer. Three calm ways to keep the same workspace within reach.
• Fin PanelZAYX · React Native
• User menuArc Library · ReactYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

Libraries with Animated drawer components

• Arc Library
• Cult UI
• uselayouts
• ZAYX
• Kokonut UI

Related categories

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