Charcoal UI

React Dialog, Popover and Tooltip Components

Animated React dialogs, drawers, popovers, tooltips, toasts and command menus.

About these dialog, popover and tooltip components

Overlays carry the moments that interrupt: confirmations, quick edits, previews and notifications. These ones open from where you clicked, morph from their trigger, and close the way people expect, with Escape, an outside click or a swipe.

Dialogs use the native dialog element for the top layer and focus trapping, tooltips open instantly once a toolbar is warm, and toasts announce themselves to screen readers.

Where they earn their keep

  • Confirmations and destructive actions.
  • Quick edit and create forms.
  • Link and profile previews on hover.
  • Command palettes and global search.

How they are built

Entrances are springs on scale, opacity and blur, and morphing overlays share a layout id with their trigger. Focus moves in on open and back on close, and reduced motion swaps every movement for a simple fade.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 19 dialog, popover and tooltip components

7 are free and MIT licensed, and 12 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Tooltip: An animated React tooltip that springs from its trigger, with instant neighbours
  • Popover: An animated React popover that scales from its trigger and returns focus on close
  • Dialog: An animated React dialog on the native dialog element, with blur and scale transitions
  • Drawer: A React bottom sheet drawer you can fling closed, with rubber-banding at the top
  • Toast: Animated React toasts that stack, fan out on hover and swipe away
  • Command Menu (Pro): An animated React command palette with fuzzy search, groups and keyboard control
  • Hover Card (Pro): An animated React hover card that previews links on hover or focus
  • Morph Dialog (Pro): A React card that morphs into a dialog: artwork and title flow between them
  • Sheet: An animated React side sheet on the native dialog element that you can fling closed
  • Notification Stack (Pro): iOS-style grouped React notifications that fan out and swipe away
  • Dynamic Island (Pro): A React Dynamic Island: a pill that morphs size and content between states
  • Staggered Menu (Pro): A full-screen React menu that arrives in coloured layers with staggered links
  • Tour Spotlight (Pro): A React onboarding tour that spotlights each target and morphs between steps
  • Undo Toast (Pro): React undo toasts with a draining ring and a shake when it is too late
  • Warm Tooltip (Pro): React tooltips that open instantly after the first, like a native toolbar
  • Alert Dialog: A free React confirm dialog that needs an answer, with async confirm
  • Popover Morph (Pro): A React button that grows into its own popover panel
  • Preview Link Card (Pro): A React link that shows a preview card with image and title on hover
  • Feedback Widget (Pro): A floating React feedback widget with face ratings and a note

Install one

npx shadcn@latest add https://charcoalui.com/r/tooltip.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do the dialogs trap focus?
Yes. Dialog, Alert Dialog and Sheet use the native dialog element, which gives you the top layer, focus trapping, an inert background and Escape to close.
Can I control them from my own state?
Yes. Each overlay takes open and onOpenChange, so you can open it from anywhere, including after an async action.
Which overlays are free?
Tooltip, Popover, Dialog, Drawer, Toast and Alert Dialog are free and MIT. The command menu, morphing and showpiece overlays are Pro.
Do these dialog, popover and tooltip components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.