Dev Design LibraryReact Widget Components
Dev Design Library indexes 250 React widget components from 44 open-source UI libraries, with the most coming from OpenSourceUI, Watermelon UI, UI Lab, ReactFrame and Amicro Micro Transitions. 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 250, a mix from every library. Open a library to see all of its components.
BalatroReact Bits · ReactThe balatro shader, fully customizalbe and interactive.
Client Tweet CardMagic UI · ReactA client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
Comp 310Origin UI · React
LightboardCult UI · ReactInteractive lightboard component with customizable grid and lighting effects
TimerArk UI · ReactUsed to record the time elapsed from zero or since a specified target time.
Compass Needle DeflectAmicro Micro Transitions · ReactMagnetic compass needle swinging and deflecting with magnetic damping.
X CardKokonut UI · ReactX (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and…
Credit CardUntitled UI React · React
CrashbeUI · ReactA crash game: a paper plane flies the multiplier up a curve until it crashes at a random point. Cash out before it…
GitHub ActivityRare UI · ReactA contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
Agent PlanSpectrum UI · ReactAn editable plan checklist the agent proposes before running.
Animated CheckboxSpell UI · ReactAnimated checkbox with spring transitions and strike-through text effect.
Image ScatterVengeance UI · ReactSmooth scroll-triggered scattered photo gallery
Canvas Dot PatternToolcraft · ReactVector workspace decoration, anchored to the viewport's centered world origin.
CountdownPanel UI · React NativeThe time left until a moment, ticking down to it.
Badge 13 - Streak DisplayShadcn Space · ReactFlame streak badge with a flickering icon loop and an animated roll-in day count
Step Count WidgetOpenSourceUI · ReactFitness widget showing the day's step count with a circular progress ring toward the goal.
Analog Stickuselayouts · ReactA metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching…
Mac KeyboardComponentry · ReactA realistic Mac keyboard component with interactive keys and detailed styling.
Animated KeyboardBadtz UI · ReactDisplays an animated keyboard with keycaps that can be customized with different colors and variants.
Skeumorphic Music CardObsidianUI · React
Claude Code Todo ListNotra · ReactThe Update Todos tool call with done, active and pending items.
Deployment ChecklistGreatUI · React
TimerShark UI · ReactCountdown or stopwatch with controls.
MinecraftButtonEvil Buttons · ReactA pixel stone menu button that cracks every few taps, shatters into chips, and drops itself as a bobbing item you pick…
Live ActivitySona UI · ReactA composable activity surface with shared-element transitions, consumer-defined views, and touch expansion gestures.
Flip ClockWatermelon UI · ReactClock with split-flap digits that flip over as the time changes.
CountdownArc Library · ReactA launch countdown with rolling digits that morphs into a live state at zero.
Liquid Watchglasscn · ReactCompact watch-style stacked time display built from liquid text inspired by Apple Watch.
Balance ScaleUI Lab · ReactWeighs your pros against your cons on a balance that tips and slowly settles.
Bento BuilderCojeev UI · ReactAn editable Bento canvas with complete partitions, content swapping, snapped neighbor resizing, history and usable…
Payment formFLX UI · ReactName on card, card number with icon, expiry, CVC, and country select fields with a pay button.
Tweet CardVelora UI · ReactStatic social-proof card — props, not an API call.
Agent Tasks PatternHalaska UI · React
Balance CardPin UI · React
WeatherMetal UI · React + SwiftUIWeather as an object: a slab with a dot-matrix sky sunk into it that follows the time of day, the temperature in the…
Fluid CountdownSpaceUI · ReactA countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and…
Dither Credit CardSkecher UI · ReactA pointer-responsive payment card with a restrained dithering shader and spring-smoothed depth.
Crypto SwitchZAYX · React NativeA crypto swap card: pick the coin you pay and the one you receive, flip them with a spring, and send.
Todo ListEaseUI · ReactA collapsible agent task plan with morphing status marks and a completion count.
Glass ClockOpaline · ReactAnalog clock on a liquid glass face with a sweeping second hand.
2048 GameReactFrame · ReactA fully playable 2048, arrow-key and swipe controls, spring-animated tile merges, score and best-score tracking, and…
KeyboardAceternity UI · React
Timerark-cn · ReactA shadcn-style timer component built with Ark UI primitives.
BallpitReact Bits · ReactPhysics ball pit simulation with bouncing colorful spheres.
Tweet CardMagic UI · ReactA card that displays a tweet with the author's name, handle, and profile picture.
TimerCult UI · ReactCountdown timer component with customizable duration and visual styles
Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
Knockout WheelbeUI · ReactThe tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves…
Gravity LettersRare UI · ReactA playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
GitHub Profile CardSpectrum UI · ReactA GitHub profile card with account stats, a contribution graph, and social links.
Spotify CardSpell UI · ReactDisplay Spotify tracks with album art and blurred background.
Interactive KeyboardVengeance UI · ReactKeyboard UI that mirrors your real key presses
Curves ControlToolcraft · React
Web WorkbenchPanel UI · React NativeA media workbench with camera, backdrop, lighting and playback controls.
Card-15 - Credit CardShadcn Space · ReactAn interactive credit card with 3D flip animation, masked card number, balance toggle, and quick action buttons.
Analog Clock WidgetOpenSourceUI · React
Bucketuselayouts · ReactAn interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired…
Music PlayerComponentry · ReactA fun interactive vinyl record music player with swinging tonearm.
Social Proof AvatarsBadtz UI · ReactA component that displays user avatars with optional extra count and star ratings, ideal for showcasing social proof.
Facebook CardGreatUI · React
Signature PadShark UI · React
Github Star HistorySona UI · React
Playful TodolistWatermelon UI · ReactTo-do list with playful animations when an item is checked off.
Onboarding checklistArc Library · ReactGuide a new workspace through setup, one step at a time.
Bubble WrapUI Lab · ReactPop every bubble to clear the list, one click or one long swipe.
Falling TextCojeev UI · ReactMeasured word rectangles fall, collide and settle inside a bounded stage.
Hero 08FLX UI · ReactA split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.
Plan Preview PatternHalaska UI · React
WeatherPin UI · React
Github ActivitySpaceUI · ReactAn interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch…
Card InsightZAYX · React Native
Glass Control CenterOpaline · ReactmacOS-style Control Center kit — glass modules, toggles, light-filled sliders and buttons.
Coin Flip GameReactFrame · ReactA real 3D CSS coin, click or tap to flip with a physical spin animation, a yes/no question field, flip history dots…
Pixelated CanvasAceternity UI · React
Falling TextReact Bits · ReactCharacters fall with gravity + bounce creating a playful entrance.
Dual Magnet DipoleAmicro Micro Transitions · ReactNorth/South magnetic dipole blocks attracting and snapping with tension.
MinesbeUI · ReactA mines board: pick tiles to find gems, each raising the multiplier, and cash out before you hit a mine. The round's…
Task ListRare UI · ReactA checklist that strikes out completed tasks and moves them to the bottom of the list.
Scheduled MaintenanceSpectrum UI · ReactA maintenance window with a ticking ETA, a stage rail and a notify-me field.
TweetSpell UI · ReactEmbed Twitter/X posts with custom styling.
Music PlayerVengeance UI · ReactCollapsible glass music player with equalizer and seekable progress
Checkbox-04 - Checkbox with todo listShadcn Space · ReactCheckbox component
Audio Recorder WidgetOpenSourceUI · React
Polaroid Draguselayouts · ReactDraggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes…
Pixel CanvasComponentry · ReactCanvas where pixels react to interaction.
Github CardGreatUI · React
Template Task ManagerShark UI · React
Prototype Avatar ShowcaseSona UI · React
Family Receive ComponentWatermelon UI · React
Signature padArc Library · ReactSmooth ink that thins with speed, with undo, replay, and PNG or SVG export.
Call WidgetUI Lab · ReactAccept turns into hang-up as the call controls unfold out of it, one by one.
Focus sessionCojeev UI · ReactA local focus timer composed from Cojeev cards, progress, badges and native controls.
Hero 10FLX UI · ReactA centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.
Voice Chat WidgetSpaceUI · ReactAn expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel…
Coin RewardZAYX · React Native
Glass Credit CardOpaline · ReactA glass payment card that tilts to the pointer, flips to its back and detects the brand.
Countdown TimerReactFrame · ReactA countdown timer that counts down to a duration or an absolute end date, with flip-cell digit transitions, a compact…
LanyardReact Bits · ReactSwinging 3D lanyard / badge card with realistic inertial motion.
Inertia Skid StopAmicro Micro Transitions · ReactSkewing inertia block sliding in with heavy friction deceleration.
PlinkobeUI · ReactA Plinko board where balls drop through rows of pegs, bounce left or right off each one and land in a slot. Pegs flash…
Market Watchlist TableSpectrum UI · ReactA price watchlist with ticker tiles, signed 24h changes and seven-day inline sparklines.
Typing KeyboardVengeance UI · React3D isometric keyboard with auto-typing screen
Drawer 01 - Onboarding ChecklistShadcn Space · ReactRight side drawer with a progress bar and an interactive onboarding checklist
Battery Face WidgetOpenSourceUI · React
Set Timeruselayouts · ReactA dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a…
Text RepelComponentry · ReactPhysics-based text where each letter reacts to cursor proximity with spring dynamics, creating an interactive magnetic…
Instagram CardGreatUI · React
Family Receive Component BaseWatermelon UI · React
Card InputUI Lab · ReactFormats as you type, spots the card brand, and flips to show the CVC.
Card FormFLX UI · ReactCard Form for Payment.
Github LinkSpaceUI · React
Fintech IslandZAYX · React Native
Glass PlayerOpaline · ReactNow-playing widget with scrubber, transport controls and volume.
Credit Card InputReactFrame · ReactA grouped card number, expiry and CVC field: brand detection with an animated mark, 4-4-4-4 or Amex 4-6-5 spacing…
Kinetic Metronome TickAmicro Micro Transitions · ReactMinimalist metronome pendulum ticking in harmonic angular rhythm.
Slide GamebeUI · ReactA slide game: set a bet and a target, then a reel of multiplier cards races past two tabs at the center of the stage…
OfflineSpectrum UI · ReactAn offline panel that counts down, retries itself and recovers on screen.
Sortable 05 - Sortable Numbered ChecklistShadcn Space · ReactA drag-and-drop sortable numbered checklist component using @dnd-kit with pill-shaped rows, a drag handle, and…
Bluetooth Face WidgetOpenSourceUI · React