Dev Design Libraryshadcn/ui Widget Components
Dev Design Library indexes 26 shadcn/ui widget components from 8 open-source UI libraries, with the most coming from Watermelon UI, Shadcn Space, FLX UI, Spectrum UI and AI Elements (Svelte). 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.
GitHub Profile CardSpectrum UI · ReactA GitHub profile card with account stats, a contribution graph, and social links.
Badge 13 - Streak DisplayShadcn Space · ReactFlame streak badge with a flickering icon loop and an animated roll-in day count
TaskAI Elements (Svelte) · SvelteA collapsible task panel for tracking task state and nested task items.
Claude Code Todo ListNotra · ReactThe Update Todos tool call with done, active and pending items.
Playful TodolistWatermelon UI · ReactTo-do list with playful animations when an item is checked off.
Liquid Watchglasscn · ReactCompact watch-style stacked time display built from liquid text inspired by Apple Watch.
Payment formFLX UI · ReactName on card, card number with icon, expiry, CVC, and country select fields with a pay button.
Direction Pad Controlssv-particles · Svelte
Scheduled MaintenanceSpectrum UI · ReactA maintenance window with a ticking ETA, a stage rail and a notify-me field.
Card-15 - Credit CardShadcn Space · ReactAn interactive credit card with 3D flip animation, masked card number, balance toggle, and quick action buttons.
Family WalletWatermelon UI · React
Hero 08FLX UI · ReactA split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.
Checkbox-04 - Checkbox with todo listShadcn Space · ReactCheckbox component
Widget 1Watermelon UI · React
Hero 10FLX UI · ReactA centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.
Drawer 01 - Onboarding ChecklistShadcn Space · ReactRight side drawer with a progress bar and an interactive onboarding checklist
Widget 2Watermelon UI · React
Card FormFLX UI · ReactCard Form for Payment.
Toggle Group 02 - Animated Social Reactions WidgetShadcn Space · ReactA premium social reactions toolbar (Like, Love, Dislike) using Base UI Toggle Group and Framer Motion spring…
Widget 3Watermelon UI · React
Saved MethodsFLX UI · ReactSaved Methods for Payment.
Widget 01 - Analytics Overview WidgetShadcn Space · ReactA compact analytics widget displaying earnings and expenses with growth indicators, perfect for admin dashboards to…
Widget 4Watermelon UI · React
Express WalletsFLX UI · ReactExpress Wallets for Payment.
Widget 02 - Sales by Country WidgetShadcn Space · ReactA ranked country wise sales widget with flags, revenue values, and growth indicators, ideal for dashboards to monitor…
Widget 5Watermelon UI · React