Dev Design LibraryEmpty State Components
Dev Design Library indexes 107 empty state components from 33 open-source UI libraries, with the most coming from Spectrum UI, ReUI, Tremor Blocks, Oxbow UI and FLX UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. 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 States 02Oxbow UI · AstroEnhanced file upload empty state
Empty stateArc Library · ReactA useful next step when there is nothing to show yet.
Data Table Emptysv-table · SvelteA table row for displaying a clear empty or filtered-results state.
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 States 04Oxbow UI · AstroProject creation empty state
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
Empty States 06Oxbow UI · AstroNo Results Found State
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
Empty States 08Oxbow UI · AstroInsights data not available state
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
Empty States 09Oxbow UI · AstroTask Management Empty State
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 States 01Oxbow UI · Astro
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
Empty States 03Oxbow UI · Astro
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
Empty States 05Oxbow UI · Astro
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
Empty States 07Oxbow UI · Astro
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 empty state components
Related categories
- React Empty State Components
- Tailwind CSS Empty State Components
- Animated Empty State Components
- shadcn/ui Empty State Components
- Feedback Components
- Badge Components
- Spinner Components
- Progress Components
- Alert Components
- Chip Components
- Progress Bar Components
- Notification Components
- Status Indicator Components
- Skeleton Components
- Banner Components
- Typing Indicator Components
- Progress Circle Components
- Error State Components
- Success Animation Components
- Scroll Progress Components