Dev Design LibraryOverlay Components
Dev Design Library indexes 1,046 overlay components from 88 open-source UI libraries, with the most coming from Watermelon UI, ReUI, Origin UI, FLX UI and Shadcn Space. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 1,046, a mix from every library. Open a library to see all of its components.
Alert Dialogshadcn/ui · ReactA modal dialog that interrupts the user with important content and expects a response.
DialogMUI / Material UI · React
Bubble MenuReact Bits · ReactNavigation bar of round bubbles (logo and toggle) that opens a full-screen overlay of pill-shaped menu links popping in.
DrawerdaisyUI · CSS (Tailwind)
Color PickerChakra UI · ReactUsed to select colors from a color area or a set of defined swatches
Alert DialogHeroUI · ReactModal dialog for critical confirmations requiring user attention and explicit action
DialogHeadless UI · React
Hero Video DialogMagic UI · ReactA hero video dialog component.
Alert DialogReact Spectrum · ReactAlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
Alert Dialogcoss ui · ReactA dialog that requires user response to proceed.
Alert DialogOrigin UI · ReactA dialog that requires user response to proceed.
Alert DialogRadix Themes · React
OverlayPreline UI · JavaScript (HTML + Tailwind)
Ai InstructionsCult UI · ReactManage and toggle AI instructions with a popover, search, and create-dialog
Color PickerArk UI · ReactA component that allows users to select a color from a color picker.
Banner Stackingtransitions.dev · HTML/CSS
DialogTremor · React
Basic alert dialog with title, description, and action buttonsReUI · ReactBasic alert dialog with title, description, and action buttons
Card Preview TileAmicro Micro Transitions · ReactCatalog preview for a card spread / carousel. Hover state lives here so hovering one tile re-renders only that tile…
ContextAI Elements · ReactA compound component system for displaying AI model context window usage, token consumption, and cost estimation.
Color PickerPark UI · ReactAn input component for selecting and manipulating color values.
Date PickerLobe UI · ReactA DatePicker component that extends Ant Design's DatePicker with additional styling options. It provides different…
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…
command-menuIntent UI · Reactcommand-menu
Date PickerUntitled UI React · React
Animated Toast StackbeUI · ReactStacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
Alert DialogTailGrids · ReactA modal dialog that interrupts the user with important content and expects a response.
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
ChartSpell UI · ReactInteractive line chart with a cursor-tracked tooltip card, snap-to-point hover, and built-in X-axis labels.
Animated TooltipVengeance UI · ReactBouncy SVG-shaped tooltips with spring animations
Color PickerFluid Functionalism · ReactColor picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on…
PopoverUser Interface Wiki · React
Alert DialogToolcraft · React
Navbar SectionLaunch UI · React
Bottom SheetPanel UI · React NativeDraggable sheet anchored to the bottom of the screen.
Aspect Ratio 03 - Caption OverlayShadcn Space · ReactA portrait aspect ratio card with a gradient overlay and caption text.
AnnotationsOpenSourceUI · React
Corner Videouselayouts · ReactA compact corner video player with smooth open/close morphing, autoplay, mute, enlarge, hover controls, and video…
Command Palette BloomKinetics · HTML/CSSA compact trigger unfolds into a staggered action lens
Date PickerBoardUI · ReactPopover calendar for single dates.
CommandComponentry · React
Date PickerTremor Blocks · React
Alert DialogShadcn Dashboard · React
Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
ContextAI Elements (Svelte) · SvelteA hover-card-based context window usage component with token, cost, and model usage breakdowns.
Confirm SheetSwiftPieces · SwiftUIA confirmation card as a bottom sheet or an inline card, its confirm and cancel splitting out of one glass shape as it…
Expandable CardBadtz UI · ReactA versatile and engaging UI component that allows users to explore content in a more immersive way.
CommandObsidianUI · React
AI Overview CitationNotra · ReactA source chip built on shadcn Badge and HoverCard.
Image Hover RevealGreatUI · React
Modals 01Oxbow UI · AstroInvite team members to your account
Banner CookieNexvyn UI · ReactA cookie consent card with accept and decline actions that lifts in once and lifts away on a choice.
Quick Audio Popoveraudiocn · ReactCompact microphone and system audio controls behind one toolbar button that shows a live level.
modalBaseLayer · ReactA modal is an overlay element which blocks interaction with elements outside it.
Alert DialogShark UI · ReactDialog for displaying important content.
DoubtButtonEvil Buttons · ReactAn escalating-confirmation button that makes you click through increasingly absurd, guilt-tripping prompts before the…
Gooey Color Picker23rd.dev · ReactA floating color picker with a circular hue wheel, alpha slider, hex field, and motion-powered open/close.
Animated DialogSona UI · ReactA composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion…
Add Cash DisclosureWatermelon UI · React
Bottom sheetArc Library · ReactA sheet that rests at a peek or full height and follows your finger.
Date Range Filtersv-table · SvelteA responsive date-range picker with presets and explicit apply behavior.
Glass Alert Dialogglasscn · ReactGlass Alert Dialog with five variants: clear, frosted, subtle, liquid, and liquid-refract
Arrow CalloutUI Lab · ReactA handwritten note whose arrow draws itself to whatever it points at.
Alert dialogHextaUI · ReactA confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on…
DevTools Drawer BlockLocalMode · ReactA global on-device observability drawer: six tabbed surfaces (inference queues, event log, pipeline runs, model cache…
Alert DialogCojeev UI · ReactPauses a workflow for a focused confirmation before a consequential action proceeds.
Alert DialogROI UI · ReactA modal dialog that interrupts the user with important content.
Command dialogFLX UI · ReactSpotlight-style ⌘K palette toggled by a button or keyboard shortcut.
Animated ModalVelora UI · ReactNative dialog whose panel springs in with a tilt over a blurred backdrop.
Alert DialogHalaska UI · React
Alert Dialog With Bare Footersv-particles · Svelte
Alert dialogMetal UI · React + SwiftUIA question that must be answered: the dialog's plate and motion; a click outside shakes it once on the refusal spring…
Alert DialogSpaceUI · ReactDisplays a modal window that asks users to confirm important actions before proceeding, helping prevent accidental…
Aria Alert DialogReScript shadcn · ReScript
Cookie ConsentSkecher UI · ReactA paper-and-cobalt cookie notice with an isometric cookie break animation, confirm-and-undo controls, and…
Base Alert DialogSora UI · ReactAn accessible alert dialog built on Base UI with smooth Motion 3D perspective entrance and exit animations…
Coin MorphZAYX · React NativeReact Native crypto coin list (CoinMorphList) with an animated counter and a coin detail modal.
Add Product Wizard ModalCue Foundations · React
Date PickerOUI · ReactReact aria components DatePicker with shadcn characteristics.
Liquid DialogLiquefy UI · ReactModal dialog in liquid glass style. Janela modal em estilo vidro líquido.
Alert DialogD2Studio UI · ReactA modal dialog that interrupts the user with important content and expects a response.
Command PaletteEaseUI · ReactCommand-K style search overlay that filters as you type, with arrow keys to move the highlight and Enter to select.
Glass CommandOpaline · React⌘K command palette on a frosted glass sheet, powered by cmdk.
Alert DialogFibo · ReactAsks for a decision before something that can't be undone, with Cancel focused and no click-outside dismiss.
AI Dynamic Island 01ReactFrame · ReactA Dynamic Island-style AI status pill that morphs between idle, listening, thinking, working (with an unfolding step…
Animated ModalAceternity UI · React
Alert Dialogark-cn · ReactA shadcn-style alert dialog component built with Ark UI primitives.
Dialogshadcn/ui · ReactA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Dialog ContentMUI / Material UI · React
Call ChipReact Bits · ReactInline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success…
ModaldaisyUI · CSS (Tailwind)
Date PickerChakra UI · ReactUsed to select dates or date ranges from a calendar.
Color PickerHeroUI · ReactA composable color picker that synchronizes color value between multiple color components
PopoverHeadless UI · React
Contextual HelpReact Spectrum · ReactContextual help shows a user extra information about the state of an adjacent component, or a total view.
Commandcoss ui · ReactA command palette component built with Dialog and Autocomplete for searching and executing commands.
DialogOrigin UI · ReactA popup that opens on top of the entire page.
DialogRadix Themes · React
TooltipPreline UI · JavaScript (HTML + Tailwind)
Base TooltipCult UI · ReactBase UI tooltip primitives used by Apple Pro Display XDR
Date PickerArk UI · ReactA component that allows users to select a date from a calendar.
Image Open Tilttransitions.dev · HTML/CSS
DrawerTremor · React
Confirmation for successful e-ticket registrationReUI · ReactConfirmation for successful e-ticket registration
Card Glance PreviewAmicro Micro Transitions · ReactMicro floating glance card popup with status indicator dot.
Inline CitationAI Elements · ReactA hoverable citation component that displays source information and quotes inline with text, perfect for AI-generated…
Date PickerPark UI · ReactAn input component for selecting dates with a calendar interface.
Draggable PanelLobe UI · ReactAn edge-anchored panel that can be resized by dragging, by keyboard, or collapsed. Built on motion values, so a drag…
Morph PopoverKokonut UI · ReactA button that grows into the form it opens, with its label sliding up to become the title, then shrinks into a…
dialogIntent UI · Reactdialog
ModalsUntitled UI React · React
Bottom SheetbeUI · ReactVaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
CommandTailGrids · ReactA command menu component with multiple variants.
Step PlayerRare UI · ReactAn iOS-style stepped progress track with a play, pause and replay control. The active step stretches into a bar that…
Citation SourcesSpectrum UI · ReactInline citation markers with hover previews or a footnote list.
Spotify CardSpell UI · ReactDisplay Spotify tracks with album art and blurred background.
Awwwards NavVengeance UI · ReactGlass bottom nav that expands into a mega-menu
Date PickerFluid Functionalism · ReactField or ghost trigger for a date, a range, or a date and a time: a calendar popover that opens on the selected day…
Text Selection PopoverUser Interface Wiki · React
Libraries with overlay components
Related categories
- React Overlay Components
- Tailwind CSS Overlay Components
- Svelte Overlay Components
- React Native Overlay Components
- Animated Overlay Components
- shadcn/ui Overlay Components
- Modal Components
- Popover Components
- Tooltip Components
- Toast Components
- Drawer Components
- Hover Card Components
- Alert Dialog Components
- Bottom Sheet Components
- Dynamic Island Components
- Tour Components
- Lightbox Components
- Cookie Banner Components
- Mini Player Components