React Empty State Components

Dev Design Library indexes 97 React empty state components from 31 open-source UI libraries, with the most coming from Spectrum UI, ReUI, Tremor Blocks, FLX UI and Lobe UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Empty state components belong to the Feedback group.

• Emptyshadcn/ui · ReactUse the Empty component to display an empty state.
• Empty StateChakra UI · ReactUsed to indicate when a resource is empty or unavailable.
• Empty StateHeroUI · React
• Illustrated MessageReact Spectrum · ReactAn IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.
• Emptycoss ui · ReactA container for displaying empty state information.
• Basic empty stateReUI · ReactBasic empty state
• EmptyLobe UI · ReactEmpty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons…
• Empty StateKokonut UI · React"An empty list that shows what is missing and turns into it: the card in the drawing becomes your first project, ready…
• Empty StateUntitled UI React · React
• No AccessSpectrum UI · ReactA permission wall that names the owner and turns request into requested.
• EmptyVengeance UI · React
• EmptyToolcraft · React
• Empty StatePanel UI · React NativePlaceholder for a list or screen with no content.
• Empty State 01 - No Projects YetShadcn Space · ReactA compact, bordered card empty state with a folder icon, heading, description, and a single primary call-to-action…
• Empty Testimonialuselayouts · ReactAn interactive empty state for testimonials with a playful folder animation.
• Empty State 01Tremor Blocks · React
• EmptyShadcn Dashboard · React
• EmptyObsidianUI · React
• Empty stateArc Library · ReactA useful next step when there is nothing to show yet.
• EmptyHextaUI · ReactA placeholder for screens with nothing to show yet, with an icon, a message and the next action.
• Capability GateLocalMode · ReactA true gate: renders its children only when the device meets a stated requirement (e.g. requires="webgpu"), otherwise…
• EmptyCojeev UI · ReactExplains an empty collection or unavailable result and creates space for a useful next step.
• BasicFLX UI · ReactIcon, title, and description for an empty list.
• Empty StateHalaska UI · React
• Empty stateMetal UI · React + SwiftUIA place with nothing in it yet: an engraved glyph in a well, what would be here, how to start, one action; it rises in…
• EmptySpaceUI · ReactDisplays helpful placeholder messages, illustrations, and action buttons when there is no data to show, guiding users…
• Aria EmptyReScript shadcn · ReScript
• EmptyD2Studio UI · ReactUse the Empty component to display an empty state.
• Empty StateFibo · ReactWhat shows where content would be: a title, why it's empty, and what to do next.
• Empty StateReactFrame · ReactA friendly empty, no-results or error placeholder with 5 icon presets, a floating icon tile, title, description and…
• Emptyark-cn · ReactEmpty state placeholder with icon, title, description, and action slots.
• No data analytics empty stateReUI · ReactNo data analytics empty state
• Base Ui ResultLobe UI · React
• No Activity YetSpectrum UI · ReactAn audit timeline with a dashed rail above its one real event.
• Empty State 03 - Chart Data Empty StateShadcn Space · ReactA simple card-based empty state with a chart-themed icon, title, description, and primary connection CTA button…
• Empty State 02Tremor Blocks · React
• Empty statesArc Library · ReactFour empty states in one illustration whose shapes morph between scenes as you switch tabs.
• Chrome AI Download GateLocalMode · ReactThe gate a user sees when a Chrome Built-in AI capability exists but its on-device model has not been fetched yet…
• With actionsFLX UI · ReactFirst-run state with primary and secondary CTAs.
• Base EmptyReScript shadcn · ReScript
• Bookmarks empty stateReUI · ReactBookmarks empty state
• No API KeysSpectrum UI · ReactKey creation that reveals the secret once, masked, with a copy that confirms itself.
• Empty State 03Tremor Blocks · React
• No resultsFLX UI · ReactSearch empty state with a clear-filters action.
• Tasks empty stateReUI · ReactTasks empty state
• Empty Board ColumnSpectrum UI · ReactA kanban column that accepts real drags from its neighbours and composes cards inline.
• Empty State 04Tremor Blocks · React
• Avatar groupFLX UI · ReactBordered empty team card with an avatar stack and invite.
• No automations empty state with toggle illustrationReUI · ReactNo automations empty state with toggle illustration
• Empty CartSpectrum UI · ReactAn empty bag with three recently viewed products that add for real.
• Empty State 05Tremor Blocks · React
• In dialogFLX UI · ReactEmpty inbox state composed inside a Dialog.
• Comments empty state with isometric board illustrationReUI · ReactComments empty state with isometric board illustration
• No Chart DataSpectrum UI · ReactGhost axes with a sample series that springs up on request.
• Empty State 06Tremor Blocks · React
• Empty teamFLX UI · ReactOverlapping avatar stack above an empty-state message with an invite button.
• No products empty state with stacked cards and blur effectReUI · ReactNo products empty state with stacked cards and blur effect
• Chart StatesSpectrum UI · ReactLoading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame…
• Empty State 07Tremor Blocks · React
• Dynamic Field ArrayFLX UI · ReactStart from an empty state, then add and remove teammate rows with per-item validation.
• Search empty state with stacked file cards illustrationReUI · ReactSearch empty state with stacked file cards illustration
• Chat Empty StateSpectrum UI · ReactA first-run greeting with staggered suggestion chips.
• Empty State 08Tremor Blocks · React
• Dynamic Field ArrayFLX UI · ReactStart from an empty state, then add and remove teammate rows with per-item validation.
• No messages empty state with chat bubbles illustrationReUI · ReactNo messages empty state with chat bubbles illustration
• Failed to LoadSpectrum UI · ReactA load failure with a copyable request id and a details panel that opens to fit.
• Empty State 09Tremor Blocks · React
• No payments empty state with credit card illustrationReUI · ReactNo payments empty state with credit card illustration
• No Matching FiltersSpectrum UI · ReactFilter chips you can drop one at a time, with the match count coming back as you do.
• Empty State 10Tremor Blocks · React
• No integrations empty state with connected nodes illustrationReUI · ReactNo integrations empty state with connected nodes illustration
• Inbox ZeroSpectrum UI · ReactA cleared inbox where the last three cards sweep out and the stats land.
• Search empty stateReUI · ReactSearch empty state
• Connect a SourceSpectrum UI · ReactA connector grid where tiles run a real connect sequence and settle into connected.
• No events empty state with calendar illustrationReUI · ReactNo events empty state with calendar illustration
• Invite TeammatesSpectrum UI · ReactA one-seat team with an avatar rail, live invite field and copyable join link.
• Empty state with search inputReUI · ReactEmpty state with search input
• Locked FeatureSpectrum UI · ReactA paywall over a blurred preview of the feature it is selling.
• Empty state with add buttonReUI · ReactEmpty state with add button
• Scheduled MaintenanceSpectrum UI · ReactA maintenance window with a ticking ETA, a stage rail and a notify-me field.
• Document empty stateReUI · ReactDocument empty state
• Page Not FoundSpectrum UI · ReactA 404 that prints the path it tried and filters real destinations as you type.
• Dashed upload empty stateReUI · ReactDashed upload empty state
• No NotificationsSpectrum UI · ReactAn empty notification tray with working channel switches and a quiet-hours state.
• Inbox empty stateReUI · ReactInbox empty state
• OfflineSpectrum UI · ReactAn offline panel that counts down, retries itself and recovers on screen.
• Team members empty stateReUI · ReactTeam members empty state
• First ProjectSpectrum UI · ReactFirst-run project screen with selectable templates and a setup checklist.
• No notifications empty stateReUI · ReactNo notifications empty state
• Limit ReachedSpectrum UI · ReactA quota wall with a full meter, seven days of history and a reset clock.
• Nothing SavedSpectrum UI · ReactAn empty saved list that teaches the gesture on three real rows.
• Nothing ScheduledSpectrum UI · ReactA day rail with a now marker where any hour opens an inline composer.
• No Search ResultsSpectrum UI · ReactA no-results state that echoes the query and resolves when a suggestion is taken.
• Empty TableSpectrum UI · ReactA table that keeps its header and column widths, with rows that spring in.
• Trash Is EmptySpectrum UI · ReactAn empty trash that explains the retention window instead of celebrating.
• Drop FilesSpectrum UI · ReactA drop zone with real drag handling and per-file upload meters.
• Waiting for EventsSpectrum UI · ReactA live endpoint waiting for its first delivery, with a test event that lands.

Libraries with React empty state components

• Spectrum UI
• ReUI
• Tremor Blocks
• FLX UI
• Lobe UI

Related categories

• Empty State Components
• Tailwind CSS Empty State Components
• Animated Empty State Components
• shadcn/ui Empty State Components
• React Feedback Components
• React Spinner Components
• React Badge Components
• React Progress Components
• React Alert Components
• React Chip Components
• React Progress Bar Components
• React Notification Components
• React Skeleton Components
• React Status Indicator Components
• React Banner Components
• React Typing Indicator Components
• React Progress Circle Components
• React Error State Components
• React Scroll Progress Components
• React Success Animation Components