Animated Empty State Components

Dev Design Library indexes 33 Animated empty state components from 6 open-source UI libraries, with the most coming from Spectrum UI, Arc Library, Shadcn Space, uselayouts and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the empty state components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Empty state components belong to the Feedback group.

• 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…
• No AccessSpectrum UI · ReactA permission wall that names the owner and turns request into requested.
• 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 stateArc Library · ReactA useful next step when there is nothing to show yet.
• Empty StateReactFrame · ReactA friendly empty, no-results or error placeholder with 5 icon presets, a floating icon tile, title, description and…
• 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 statesArc Library · ReactFour empty states in one illustration whose shapes morph between scenes as you switch tabs.
• No API KeysSpectrum UI · ReactKey creation that reveals the secret once, masked, with a copy that confirms itself.
• Empty Board ColumnSpectrum UI · ReactA kanban column that accepts real drags from its neighbours and composes cards inline.
• Empty CartSpectrum UI · ReactAn empty bag with three recently viewed products that add for real.
• No Chart DataSpectrum UI · ReactGhost axes with a sample series that springs up on request.
• Chat Empty StateSpectrum UI · ReactA first-run greeting with staggered suggestion chips.
• Failed to LoadSpectrum UI · ReactA load failure with a copyable request id and a details panel that opens to fit.
• No Matching FiltersSpectrum UI · ReactFilter chips you can drop one at a time, with the match count coming back as you do.
• Inbox ZeroSpectrum UI · ReactA cleared inbox where the last three cards sweep out and the stats land.
• Connect a SourceSpectrum UI · ReactA connector grid where tiles run a real connect sequence and settle into connected.
• Invite TeammatesSpectrum UI · ReactA one-seat team with an avatar rail, live invite field and copyable join link.
• Locked FeatureSpectrum UI · ReactA paywall over a blurred preview of the feature it is selling.
• Scheduled MaintenanceSpectrum UI · ReactA maintenance window with a ticking ETA, a stage rail and a notify-me field.
• Page Not FoundSpectrum UI · ReactA 404 that prints the path it tried and filters real destinations as you type.
• No NotificationsSpectrum UI · ReactAn empty notification tray with working channel switches and a quiet-hours state.
• OfflineSpectrum UI · ReactAn offline panel that counts down, retries itself and recovers on screen.
• First ProjectSpectrum UI · ReactFirst-run project screen with selectable templates and a setup checklist.
• 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 Animated empty state components

• Spectrum UI
• Arc Library
• Shadcn Space
• uselayouts
• Kokonut UI

Related categories

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