Dev Design LibraryPage Components
Dev Design Library indexes 230 page components from 38 open-source UI libraries, with the most coming from Watermelon UI, Tremor Blocks, Oxbow UI, Shadcn Space 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.
Showing 120 of 230, a mix from every library. Open a library to see all of its components.
Dashboard 01shadcn/ui · ReactA dashboard with sidebar, charts and data table.
ChatdaisyUI · CSS (Tailwind)
Chatcoss ui · ReactComposable chat components with messages, reactions, replies, and delivery states.
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.
Event calendar with all views and live settingsReUI · ReactEvent calendar with all views and live settings
Dashboard Auth LayoutLobe UI · React
Page FlipKokonut UI · ReactA book you turn by the corner. Drag a page over the spine or tap to turn it.
auth-01Intent UI · Reactauth-01
Chat AppbeUI · ReactA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code…
HTTP Status CodeSpectrum UI · Reactcomponent for the HTTP Status Code
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…
Alert 14 - Logout with ProfileShadcn Space · ReactCompact logout dialog with the user's avatar, name, and email, plus an option to log out of all devices
Chat UiPixel Perfect · ReactA streaming chat UI built on MessageScroller — anchored turns, follow-the-edge auto-scroll, a dot-matrix thinking…
Agent ChatBoardUI · React
Account And User Management 01Tremor Blocks · React
Forgot Password Onecnblocks · SvelteForgot password form with email input
Page DotsSwiftPieces · SwiftUIA page control whose red capsule pours from dot to dot, with tap and scrub to jump and an autoplay timer that fills…
Analytics DashboardObsidianUI · React
ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
Product Details 01Oxbow UI · AstroSimple details with CTA
LoginNexvyn UI · ReactLoginForm: labelled email and password fields, a password toggle, provider buttons and error state.
System Audio Settingsaudiocn · ReactTurn system audio capture on, set its level, watch its meter and explain what the browser will capture.
Template AiShark UI · React
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…
Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
Not Found Onesv-efferd · SvelteA framed 404 layout with full-width dividers and balanced recovery actions.
Centered loginArc Library · ReactA passkey-first login card on a quiet ring backdrop that morphs through email and code.
Chat BlockLocalMode · ReactThe flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with…
Analytics overviewFLX UI · ReactSidebar, KPI cards, a bar chart, and a recent activity list.
Split login pageVelora UI · ReactLogin form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.
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…
Grid Row Profile ExpanderCue Foundations · React
Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
404 Page SectionReactFrame · ReactA centered "page not found" section: a big glitching error code, heading, description and one or two pill buttons…
Login 02shadcn/ui · ReactA two column login page with a cover image.
OnboardingCult UI · ReactComposable multi-step onboarding primitives: Onboarding root with step navigation, FeatureCarousel, ChoiceGroup radio…
Event calendar with resource view for room bookingsReUI · ReactEvent calendar with resource view for room bookings
Dashboard Auth ToolsLobe UI · React
auth-02Intent UI · Reactauth-02
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.
Checkout 01 - Tabbed Billing CheckoutShadcn Space · ReactA clean checkout interface with tab-based payment selection, subscription pricing details, and streamlined billing…
DashboardBoardUI · React
Account And User Management 02Tremor Blocks · React
Forgot Password Twocnblocks · SveltePassword reset form with side illustration
Dashboard Shell PageObsidianUI · React
ClaudeNotra · ReactA full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on…
Sign In 01Oxbow UI · AstroSign in with magic link
Login Email firstNexvyn UI · ReactA centered sign in page that leads with the email form, providers side by side below.
Template AuthShark UI · React
Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
Not Found Twosv-efferd · SvelteA minimal full-screen 404 with oversized typography and direct recovery actions.
Sign inArc Library · ReactA sign in card that morphs from email to a six digit code to your account.
Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
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.
Pixel Perfect Shop OnboardingCue Foundations · React
Product DetailReactFrame · ReactAn eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated…
Login 03shadcn/ui · ReactA login page with a muted background color.
Event calendar with create and edit dialogReUI · ReactMonth calendar with event CRUD in one dialog: open from an empty day, an event, or Add event, commit via apiRef…
Dashboard Filter StripLobe UI · React
auth-03Intent UI · Reactauth-03
Not FoundbeUI · React
Collapsible 04 - User ProfileShadcn Space · ReactA collapsible user profile with user information like last activity, online since and location and actions.
LandingBoardUI · React
Account And User Management 03Tremor Blocks · React
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Sign In 02Oxbow UI · AstroCentered sign in block
Login TestimonialNexvyn UI · ReactThe split sign in page with a customer quote over the photo.
Template BlogShark UI · React
Demostack DashboardWatermelon UI · ReactA responsive product-demo workspace with organization switching, resource discovery, team filtering, and light and…
Change PlanFLX UI · ReactChange Plan for Manage Subscription.
SettingsMetal UI · React + SwiftUIAn app's settings as sections of rows: an engraved heading over a raised card; each row a name, an optional detail and…
Login 04shadcn/ui · ReactA login page with form and image.
Event calendar with custom event chipsReUI · ReactEvent calendar with custom event chips
Dashboard Label With KeyLobe UI · React
Context Menu 03 - File ManagerShadcn Space · ReactFile cards with a right click menu for open, rename, star, a share submenu, duplicate, download, and move to trash…
MedicalBoardUI · React
Account And User Management 04Tremor Blocks · React
CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
Sign In 04Oxbow UI · AstroSplit screen sign in with customers.
Login Social firstNexvyn UI · ReactA centered sign in page that leads with Google and Apple buttons.
Template DashboardShark UI · React
Gridline DashboardWatermelon UI · ReactA responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder…
Cancel FlowFLX UI · ReactCancel Flow for Manage Subscription.
Signup 02shadcn/ui · ReactA two column signup page with a cover image.
Event calendar with drag-to-book appointmentsReUI · ReactEvent calendar with drag-to-book appointments
Dashboard Metric StripLobe UI · React
Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
SettingsBoardUI · React
Account And User Management 05Tremor Blocks · React
GeminiNotra · ReactA full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.
Sign In 05Oxbow UI · AstroSplit screen login with quote
Login SplitNexvyn UI · ReactA two column sign in page with a full height photo panel.
Template EcommerceShark UI · React
Jobtracker DashboardWatermelon UI · ReactA responsive job management workspace with customer records, job pipelines, estimates, drag-and-drop line items, and…
Email LinkFLX UI · ReactEmail Link for Reset Password.
Signup 03shadcn/ui · ReactA signup page with a muted background color.
Event CalendarReUI · ReactA headless-first event calendar with month, week, day, N-day and agenda views, drag-and-drop scheduling, recurring…
Dashboard Page ToolbarLobe UI · React
Dialog 09 - Edit ProfileShadcn Space · ReactEdit profile dialog with photo upload preview, validated name and username fields, a bio counter, and a saving state.
TemplatesBoardUI · React
Account And User Management 06Tremor Blocks · React
Google AI OverviewNotra · ReactA full recreation of Google's AI Overview built from the AI Overview components on shadcn Base UI.
Sign Up 01Oxbow UI · Astrosimple Sign up block
Template EmailShark UI · React
Landing 01Watermelon UI · ReactA modern dark-themed landing page with animated hero section, stats, feature showcase, component bento grids…
OTP CodeFLX UI · ReactOTP Code for Reset Password.
Signup 04shadcn/ui · ReactA signup page with form and image.
Dashboard Panel SurfaceLobe UI · React
Dropdown Menu 01 - User ProfileShadcn Space · ReactA professional user profile dropdown with avatar, status indicator, and categorized links for profile, settings, and…
Account And User Management 07Tremor Blocks · React
OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
Sign Up 02Oxbow UI · AstroCentered sign up block
Template LandingShark UI · React
Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
Libraries with page components
Related categories
- React Page Components
- Tailwind CSS Page Components
- Animated Page Components
- shadcn/ui Page Components
- Dashboard Page Components
- Login Page Components
- Onboarding Page Components
- Settings Page Components
- Chat Page Components
- Error Page Components
- Product Page Components
- Signup Page Components
- Landing Page Components
- Calendar Page Components
- Profile Page Components