Dev Design LibraryReact Page Components
Dev Design Library indexes 200 React page components from 33 open-source UI libraries, with the most coming from Watermelon UI, Tremor Blocks, Shadcn Space, FLX UI and Shark 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.
Showing 120 of 200, 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.
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
Analytics DashboardObsidianUI · React
ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
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…
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
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…
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…
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…
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.
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.
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.
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.
Template LandingShark UI · React
Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
Security QuestionsFLX UI · ReactSecurity Questions for Reset Password.
Dropdown Menu 03 - Voice ChatShadcn Space · ReactA voice chat dropdown with avatar previews, real-time search, and smooth layout animations.
Account And User Management 08Tremor Blocks · React
PerplexityNotra · ReactA full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable…
Template PodcastShark UI · React
Medesk DashboardWatermelon UI · ReactA healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow…
Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
Field 02 - Notification SettingsShadcn Space · ReactA notification preferences list built with the Field primitive, pairing horizontal fields with switches and separators…
Account And User Management 09Tremor Blocks · React
Template Task ManagerShark UI · React
Tallie DashboardWatermelon UI · ReactAn expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
Tabbed SectionsFLX UI · ReactTabbed Sections for Settings.
Forgot Password 01 - Forgot Your Password PageShadcn Space · ReactA minimal password recovery page that lets users request a secure reset link via email, helping reduce friction and…