Dev Design LibraryAnimated Page Components
Dev Design Library indexes 29 Animated page components from 18 open-source UI libraries, with the most coming from Shadcn Space, Notra, ObsidianUI, beUI and Arc Library. 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 page components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
Intro DisclosureCult UI · ReactIntro disclosure component with expandable content and smooth animations- Magnetkit WebLibraries.dev · ReactLanding page of a magnetic UI kit: particles and elements pulled toward the cursor.
Page FlipKokonut UI · ReactA book you turn by the corner. Drag a page over the spine or tap to turn it.
Volume ProfilebeUI · ReactAnimated volume by price, with point of control and value area highlights.
Page Not FoundSpectrum UI · ReactA 404 that prints the path it tried and filters real destinations as you type.
Settings Dialog (Sidebar in a Dialog)Fluid Functionalism · ReactA settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling…
Collapsible 04 - User ProfileShadcn Space · ReactA collapsible user profile with user information like last activity, online since and location and actions.
Chat UiPixel Perfect · ReactA streaming chat UI built on MessageScroller — anchored turns, follow-the-edge auto-scroll, a dot-matrix thinking…
Analytics DashboardObsidianUI · React
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
Dithered 40423rd.dev · ReactBayer-pixel 404 section: a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional…
Centered loginArc Library · ReactA passkey-first login card on a quiet ring backdrop that morphs through email and code.
Chat RoomPin UI · React
SettingsMetal UI · React + SwiftUIA settings block: profile fields validated on blur and save, notification switches, a colorway and density, and a save…
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
Pixel Perfect Shop OnboardingCue Foundations · React
404 Page SectionReactFrame · ReactA centered "page not found" section: a big glitching error code, heading, description and one or two pill buttons…
Not FoundbeUI · React
Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
Dashboard Shell PageObsidianUI · React
CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
Sign inArc Library · ReactA sign in card that morphs from email to a six digit code to your account.
Task inboxMetal UI · React + SwiftUIA task list block: search and views, a tick that settles a task into Done, multi-select with a tool strip to complete…
Event CalendarSpaceUI · ReactDisplays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.
Product DetailReactFrame · ReactAn eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated…
Dropdown Menu 03 - Voice ChatShadcn Space · ReactA voice chat dropdown with avatar previews, real-time search, and smooth layout animations.
OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
Progress 09 - Page Loading & IndeterminateShadcn Space · ReactTop page loading bar that trickles and finishes on navigation, plus an indeterminate progress bar for tasks with…