Notification Drawer Panel
Bootstrap 5 offcanvas notification drawer with notifications grouped by day, unread filter, mark all as read and dismiss buttons.
Feedback & Overlays
Dialogs, notifications and loading states.
31 components
Newsletter Popup Modal with Side Image
Tailwind CSS newsletter popup with a side photo, email validation, focus trap, dismiss memory and a thank-you state.
Skeleton Product Grid
Pure CSS skeleton loader for a product grid with shimmering placeholder cards, a wave-like sweep and an accessible loading status.
Top Announcement Bar
Dismissible gradient announcement bar fixed to the top of the page, with a tag, link, close button, Escape support and remembered dismissal.
Pulse Ring Loader
Pure CSS loading animation with concentric rings expanding from a beating dot, in default, large and inline sizes with custom properties and reduced motion.
User Hover Card Popover with Photo
Bootstrap 5 popover hover card showing a user photo, cover band, bio, follower stats and a working follow button.
Shimmer Skeleton
Dark pure CSS skeleton screen for a profile card, article and comment list, with one synchronized shimmer sweep across every placeholder.
Bouncing Dots Loader
Pure CSS three-dot loaders: bounce, pulse with rings, chat typing indicator and a button loading state, all driven by custom properties.
Upload Progress List
Dark Tailwind CSS upload list with per-file progress bars, speed and time left, pause, resume, retry and remove actions, a queue and total progress.
Toast with Progress Bar
Stacked toast notifications with a CSS countdown progress bar that pauses on hover or focus and closes the toast when it runs out.
Circular Progress Indicator
SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.
Pure CSS Tooltips
JavaScript-free tooltips driven by data attributes, with top, right, bottom and left placement, arrows, color tones and hover or focus triggers.
Native dialog Modal
Accessible modal built on the native HTML dialog element with @starting-style enter and exit animation, blurred backdrop, mobile bottom sheet and an invite form.
Cookie Preferences Modal
Bootstrap 5 cookie consent banner with a preferences modal: category switches, collapsible cookie tables, accept, reject and save actions, stored safely in localStorage.
No Search Results
Bootstrap 5 empty search state with a spelling-aware "Did you mean" suggestion, removable filter chips, search tips, popular searches and a support link.
Animated Progress Bars
Bootstrap 5 dark dashboard with labelled bars that fill on scroll, a striped animated build progress bar and a stacked storage bar.
Offcanvas Shopping Cart
Bootstrap 5 offcanvas cart drawer with quantity steppers, remove buttons, free-shipping progress, live totals and an empty state.
Popover with Rich Content
Bootstrap 5 popovers with HTML content: profile card with buttons, inline help with links and a delete confirmation, with focus handling.
Dismissible Alerts with Icons
Bootstrap 5 dismissible alerts with icons, headings, per-alert close buttons, dismiss all, restore and screen reader announcements.
Bootstrap Toast Stack
Bootstrap 5 toast notifications in a corner stack: success, info, warning and error buttons, selectable corner, auto-hide with a progress bar and a stack limit.
Login Modal
Bootstrap 5 login modal with social sign-in buttons, floating labels, a show/hide password toggle, client-side validation and a signed-in success view.
Delete Confirmation Modal
Dark Bootstrap 5 modal that confirms deleting an item by typing its exact name, with per-row triggers, a loading state and removal of the deleted row.
Slide-Over Panel
Tailwind CSS slide-over drawer from the right with header, scrollable form content, sticky footer actions, focus trap and Escape to close.
Alerts Collection
Tailwind CSS alerts collection with success, warning, error and info variants, icons, action links and accessible dismiss buttons.
What are feedback and overlay components?
Feedback and overlay components tell users what is happening and ask for their attention when needed. They include modals and dialogs, toasts and notifications, alerts, tooltips, popovers, drawers, progress bars, spinners, skeleton loaders and cookie or consent banners. Used well, they confirm actions, report errors and keep people informed during loading; used badly, they interrupt and annoy.
Component types in this category
- Modals and dialogs for confirmations, forms and focused tasks.
- Toasts, alerts and banners for success, warning and error messages.
- Tooltips and popovers for short hints and extra context.
- Loaders: spinners, progress bars and skeleton screens.
- Drawers and other panels that slide over the page.
Best practices for feedback and overlays
Match the urgency of the message to the component. A saved setting deserves a quiet toast; a destructive action deserves a confirmation dialog. Overlays must trap focus while open, return focus to the trigger when closed, close with the Escape key and have a labelled close button. Give dialogs aria-labelledby pointing at their title.
Status messages that appear without a page reload should be announced to assistive technology, typically with role="status" for polite updates or role="alert" for errors. Do not auto-dismiss important errors, and give toasts enough time to be read. Tooltips should appear on focus as well as hover and must not hold essential information. For loading states, prefer skeleton screens for content and progress bars for tasks with a known duration, and respect prefers-reduced-motion for animated loaders.
Framework versions
Snippets are offered for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. The Bootstrap 6 alpha builds modals and similar overlays on the native <dialog> element and ships its JavaScript as an ES module, which gives built-in focus handling and Escape support; Bootstrap 5 versions use the classic modal, toast and tooltip plugins. Filter by framework, test each overlay in the live preview, then copy the HTML, CSS and JS from the code tabs or download it and wire it to your own events.