React alerts, toasts and empty states
Free React feedback components: toasts, alerts, banners, callouts, progress, skeletons, spinners, and empty, error and offline states for real products.
30 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Products spend a surprising amount of time empty, loading or broken. These components give those moments the same care as the happy path: skeletons that match the real layout, empty states that point to the next action, and errors that say what happened.
Toasts and banners use status tokens at equal visual weight, so success never shouts and warnings stay readable in dark mode.
Components 28
BadgeuiShadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.npx shadcn@latest add ui.minidev.pro/r/badge.jsonBanneruiInline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.npx shadcn@latest add ui.minidev.pro/r/banner.jsonCalloutuiTailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.npx shadcn@latest add ui.minidev.pro/r/callout.jsonEmpty SearchuiNo results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.npx shadcn@latest add ui.minidev.pro/r/empty-search.jsonEmpty StateuiDashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.npx shadcn@latest add ui.minidev.pro/r/empty-state.jsonError StateuiReact error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.npx shadcn@latest add ui.minidev.pro/r/error-state.jsonHealth IndicatoruiA status dot and label for service health with operational, degraded and down states mapped to success, warning and danger colors. Made for status pages.npx shadcn@latest add ui.minidev.pro/r/health-indicator.jsonIncident BanneruiA full width Tailwind status bar announcing an outage with minor, major and critical severity colors, the incident title and a link to your status page.npx shadcn@latest add ui.minidev.pro/r/incident-banner.jsonInline AlertuiAn inline React message box in neutral, success, warning and danger tones with a matching icon, an optional title and body text. Announced with role alert.npx shadcn@latest add ui.minidev.pro/r/inline-alert.jsonLoading OverlayuiA translucent overlay that covers its parent with a centered spinner and label while data loads, inheriting the parent radius and announced with role status.npx shadcn@latest add ui.minidev.pro/r/loading-overlay.jsonMeteruiA horizontal gauge bar using role meter with aria value attributes, an optional label and a fill clamped to 100 percent. For storage, quota and usage limits.npx shadcn@latest add ui.minidev.pro/r/meter.jsonNot Found StateuiA 404 state with the error code, a Page not found heading, a short explanation and Go home and Open gallery buttons, centered in a card. Built in React.npx shadcn@latest add ui.minidev.pro/r/not-found-state.jsonNotification ItemuiA single notification row with an unread dot and tint, a truncated title, relative time and a short body line. Stack it in React inboxes and activity feeds.npx shadcn@latest add ui.minidev.pro/r/notification-item.jsonOffline BanneruiA full width amber banner shown when the app loses its connection, with a wifi off icon, a note that changes will sync later and an optional Retry button.npx shadcn@latest add ui.minidev.pro/r/offline-banner.jsonOffline StateuiAn offline status card with a warning dot, a You are offline heading, a note on what still works and a Retry connection button. For PWA and sync apps.npx shadcn@latest add ui.minidev.pro/r/offline-state.jsonPermission DenieduiA 403 style access card explaining that admin rights are needed, with Request access and Switch workspace buttons. Use it wherever a route is role gated.npx shadcn@latest add ui.minidev.pro/r/permission-denied.jsonPresence DotuiA small colored dot for user status: online, away, busy or offline, exposed with role status and an aria label. Overlay it on avatars in chat and team lists.npx shadcn@latest add ui.minidev.pro/r/presence-dot.jsonProgress CircleuiA compact circular progress indicator drawn in SVG with a configurable size, an accent arc, an accessible label and the percentage in monospace below it.npx shadcn@latest add ui.minidev.pro/r/progress-circle.jsonProgressuiA linear progress bar built on Base UI with track, indicator, label and value parts, a default aria label and smooth width transitions. Matches shadcn progress.npx shadcn@latest add ui.minidev.pro/r/progress.jsonReaction BaruiRow of emoji reaction pills with counts, where active reactions get an accent border and aria-pressed. Toggle callbacks suit comments and chat threads.npx shadcn@latest add ui.minidev.pro/r/reaction-bar.jsonRetry BlockuiError block that pairs a danger inline alert with a Try again button and an onRetry callback. Defaults to a request failed message you can override in React.npx shadcn@latest add ui.minidev.pro/r/retry-block.jsonServer Error Stateui500 error state card with a danger outline, a short explanation, and Retry and Copy request id buttons so users can recover or reach support with context.npx shadcn@latest add ui.minidev.pro/r/server-error-state.jsonSkeletonuiTailwind skeleton loader with a sunken plate and a soft sheen that sweeps every 1.6s, plus a SkeletonCard preset with title, text lines and a media block.npx shadcn@latest add ui.minidev.pro/r/skeleton.jsonSpinneruiLoading spinner in sm, default and lg sizes with role status and an accessible Loading label. Drop it into buttons, cards or full page states in a Tailwind app.npx shadcn@latest add ui.minidev.pro/r/spinner.jsonStatus BadgeuiTailwind status badge with a tinted fill, hairline border and colored dot in neutral, success, warning, danger, accent and info tones that read as one set.npx shadcn@latest add ui.minidev.pro/r/status-badge.jsonStatus DotuiSmall status dot in neutral, success, warning, danger and accent tones, built with cva. Place it next to labels for online, healthy or failing indicators.npx shadcn@latest add ui.minidev.pro/r/status-dot.jsonToastuiToast notifications with a toast() API for success, error, warning and promise states. The Toaster stacks cards, fans them out on hover and pauses timers.npx shadcn@latest add ui.minidev.pro/r/toast.jsonVote ControluiUpvote and downvote control with a score between two chevrons, aria-pressed states and click again to undo. Built in React for forums and feedback boards.npx shadcn@latest add ui.minidev.pro/r/vote-control.json
Blocks and full pages 2
Empty WorkspaceblockAn empty workspace screen with a no projects empty state and new project action, plus follow up buttons to import from Git or invite teammates.npx shadcn@latest add ui.minidev.pro/r/empty-workspace.jsonNotification CenterblockA React notification center card with a settings action and a stack of notification items showing title, body, relative time and an unread marker.npx shadcn@latest add ui.minidev.pro/r/notification-center.json
Frequently asked questions
How do I show a toast?
Install the toast component, mount the Toaster once near the root, and call it from anywhere with a title, description and optional action.
Should I use a skeleton or a spinner?
Use a skeleton when you know the shape of the content that is coming, and a spinner for short actions like saving a form.
Are status colors accessible?
Status text meets contrast on its tinted background in light and dark, and every status pairs color with an icon or label so it never relies on color alone.