Dev Design Libraryshadcn/ui Page Components
Dev Design Library indexes 81 shadcn/ui page components from 12 open-source UI libraries, with the most coming from Watermelon UI, Shadcn Space, FLX UI, Notra and Intent UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project.
Intro DisclosureCult UI · ReactIntro disclosure component with expandable content and smooth animations
auth-01Intent UI · Reactauth-01
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…
ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
System Audio Settingsaudiocn · ReactTurn system audio capture on, set its level, watch its meter and explain what the browser will capture.
Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
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.
Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
OnboardingCult UI · ReactComposable multi-step onboarding primitives: Onboarding root with step navigation, FeatureCarousel, ChoiceGroup radio…
auth-02Intent UI · Reactauth-02
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…
ClaudeNotra · ReactA full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on…
Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
auth-03Intent UI · Reactauth-03
Collapsible 04 - User ProfileShadcn Space · ReactA collapsible user profile with user information like last activity, online since and location and actions.
GeminiNotra · ReactA full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.
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.
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…
PerplexityNotra · ReactA full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable…
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.
Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
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.
Dialog 09 - Edit ProfileShadcn Space · ReactEdit profile dialog with photo upload preview, validated name and username fields, a bio counter, and a saving state.
Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
OTP CodeFLX UI · ReactOTP Code for Reset Password.
Dropdown Menu 01 - User ProfileShadcn Space · ReactA professional user profile dropdown with avatar, status indicator, and categorized links for profile, settings, and…
Medesk DashboardWatermelon UI · ReactA healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow…
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.
Tallie DashboardWatermelon UI · ReactAn expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
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…
Bionis DashboardWatermelon UI · React
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…
Business ManagementWatermelon UI · React
Sidebar LayoutFLX UI · ReactSidebar Layout for Settings.
Login 01 - Developer-Friendly Login PageShadcn Space · ReactA clean, secure login page with Google and GitHub authentication, remember-me support, and password recovery, built…
Business Operations DashboardWatermelon UI · React
Inline EditFLX UI · ReactInline Edit for Settings.
Progress 03 - Skills DashboardShadcn Space · ReactA professional skills overview with color-coded, animated progress bars and entrance effects.
Capitalio DashboardWatermelon UI · React
Progress 09 - Page Loading & IndeterminateShadcn Space · ReactTop page loading bar that trickles and finishes on navigation, plus an indeterminate progress bar for tasks with…
E Commerce DashboardWatermelon UI · React
Register 01 - Simple & Secure Signup PageShadcn Space · ReactA streamlined signup page with Google and GitHub authentication, clean form fields, and conversion-focused layout…
Erp DashboardWatermelon UI · React
Skeleton 07 - DashboardShadcn Space · ReactDashboard skeleton with four KPI cards and a bar chart panel with header, varied bar heights, and axis labels.
Error 1Watermelon UI · React
Stepper 05 - Checkout with ValidationShadcn Space · ReactCheckout stepper for shipping, payment, and review with per-step validation, error indicators, card formatting, and an…
Error 2Watermelon UI · React
Stepper 06 - Compact Mobile OnboardingShadcn Space · ReactCompact segmented progress stepper for mobile onboarding questions with a step counter, back button, skip, and a…
Error 4Watermelon UI · React
Two Factor Authentication 01 - Two-Factor Authentication PageShadcn Space · ReactA secure two-factor authentication screen with one-time code inputs and resend option, adding an extra protection…
Error 5Watermelon UI · React
Verify Email 01 - Email Verification PageShadcn Space · ReactA clean email verification screen that confirms account activation, guides users to check their inbox, and offers…
Error 6Watermelon UI · React
Error 7Watermelon UI · React
HrmWatermelon UI · React
Incident ManagementWatermelon UI · React
Invoice Generator DashboardWatermelon UI · React
Invoice Manager DashboardWatermelon UI · React
Issue TrackingWatermelon UI · React
Lead DashboardWatermelon UI · React
Mail DashboardWatermelon UI · React
Meetings DashboardWatermelon UI · React
Payment Operations DashboardWatermelon UI · React
Portfolio DashboardWatermelon UI · React
Project Management DashboardWatermelon UI · React
Sales DashboardWatermelon UI · React
Task Management DashboardWatermelon UI · React
Web3 DashboardWatermelon UI · React
Workflow Management DashboardWatermelon UI · React