Watermelon UI components

Free, copy-pasteable components, blocks, dashboards and templates from the Watermelon UI registry.

Components: 1,070
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 101
Source: https://github.com/WatermelonCorp/watermellon-registry
Website: https://ui.watermelon.sh
Install: npx shadcn add @watermelon/ui/{name}

All Watermelon UI components

Aave Swap Component
Accordion
Accordion 03
Accordion 04
Accordion 05
Accordion 1
Accordion 10
Accordion 11
Accordion 12
Accordion 13
Accordion 14
Accordion 15
Accordion 16
Accordion 2
Accordion 3
Accordion 4
Accordion 5
Accordion 6
Accordion 7
Accordion 8
Accordion 9
Accordion Multiselect
Activities Card
Adaptive Slider
Adaptive Slider Base
Add Cash Disclosure
Agndex Dashboard: A developer portal for managing search indexes, API credentials, billing, and project settings with light and dark themes.
Ai Input 001
Ai Input 002
Ai Input 003
Ai Input 004
Ai Input 005
Alert
Alert 01
Alert 02
Alert 03
Alert 04
Alert 05
Alert 06
Alert 1
Alert 10
Alert 11
Alert 12
Alert 13
Alert 14
Alert 15
Alert 16
Alert 17
Alert 18
Alert 19
Alert 2
Alert 20
Alert 21
Alert 22
Alert 23
Alert 24
Alert 25
Alert 26
Alert 27
Alert 28
Alert 29
Alert 3
Alert 30
Alert 4
Alert 5
Alert 6
Alert 7
Alert 8
Alert 9
Alert Dialog
Alert Dialog 01
Alert Dialog 02
Alert Dialog 03
Alphine Booking Form
Alphine Login Form
Animate Button
Animated Accordion
Animated Button
Announcement 1
Announcement 2
Announcement 3
Announcement 4
Announcement 5
Announcement 6
Announcement 7
Announcement 8
Announcement 9
Astrix Dashboard: A trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and dark themes.
Audio Player
Audio Player With Waveform
Auth 01
Auth 02
Auth 03
Auth 04
Auth 05
Auth 06
Auth 07
Auth 08
Auth 09
Auth 10
Auth 11
Auth 12
Auth 13
Availability
Avatar
Avatar 01
Avatar 02
Avatar 03
Avatar 04
Avatar 05
Avatar 06
Avatar 1
Avatar 10
Avatar 11
Avatar 12
Avatar 13
Avatar 14
Avatar 15
Avatar 16
Avatar 17
Avatar 18
Avatar 19
Avatar 2
Avatar 20
Avatar 21
Avatar 3
Avatar 4
Avatar 5
Avatar 6
Avatar 7
Avatar 8
Avatar 9
Avatar Group
Award
Badge
Badge 01
Badge 02
Badge 03
Badge 04
Badge 05
Badge 1
Badge 10
Badge 11
Badge 12
Badge 13
Badge 14
Badge 15
Badge 16
Badge 17
Badge 18
Badge 19
Badge 2
Badge 20
Badge 21
Badge 22
Badge 3
Badge 4
Badge 5
Badge 6
Badge 7
Badge 8
Badge 9
Bento 01
Bento 02
Bento 1
Bento 10
Bento 11
Bento 12
Bento 13
Bento 14
Bento 15
Bento 16
Bento 17
Bento 2
Bento 3
Bento 4
Bento 5
Bento 6
Bento 7
Bento 8
Bento 9
Bionis Dashboard
Blog 1
Blog 2
Blog 3
Blog 4
Book
Breadcrumb
Breadcrumb 01
Breadcrumb 02
Breadcrumb 03
Breadcrumb 04
Breadcrumb 1
Breadcrumb 2
Breadcrumb 3
Breadcrumb 4
Breadcrumb 5
Breadcrumb 6
Breadcrumb 7
Breadcrumb 8
Browser
Budget Card
Budget Card Base
Business Management
Business Operations Dashboard
Button
Button 01
Button 02
Button 03
Button 04
Button 05
Button 06
Button 07
Button 08
Button 1
Button 10
Button 11
Button 12
Button 13
Button 14
Button 15
Button 16
Button 17
Button 18
Button 19
Button 2
Button 20
Button 21
Button 22
Button 23
Button 24
Button 25
Button 26
Button 27
Button 28
Button 29
Button 3
Button 30
Button 31
Button 32
Button 33
Button 34
Button 35
Button 36
Button 37
Button 38
Button 4
Button 5
Button 6
Button 7
Button 8
Button 9
Button Group 1
Button Group 10
Button Group 11
Button Group 12
Button Group 2
Button Group 3
Button Group 4
Button Group 5
Button Group 6
Button Group 7
Button Group 8
Button Group 9
Calendar
Calendar 1
Calendar 10
Calendar 11
Calendar 12
Calendar 13
Calendar 14
Calendar 15
Calendar 16
Calendar 17
Calendar 18
Calendar 19
Calendar 2
Calendar 20
Calendar 21
Calendar 22
Calendar 23
Calendar 24
Calendar 25
Calendar 3
Calendar 4
Calendar 5
Calendar 6
Calendar 7
Calendar 8
Calendar 9
Calendar Widget
Calendar Widget Base
Capitalio Dashboard
Card
Card 1
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card Cue
Card Cue Base
Card Split Accordion
Card Split Accordion Base
Card Swipe
Career 1
Career 2
Career 3
Career 4
Carousel Navigator
Carousel Slider
Changeable Pricing Section
Changeable Pricing Section Base
Chart
Chart 2
Checkbox
Checkbox 1
Checkbox 10
Checkbox 11
Checkbox 12
Checkbox 13
Checkbox 14
Checkbox 15
Checkbox 16
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5
Checkbox 6
Checkbox 7
Checkbox 8
Checkbox 9
Code
Code Block
Code Tabs
Collapsible
Collapsible 1
Collapsible 2
Collapsible 3
Collapsible 4
Collapsible 5
Collapsible 6
Collapsible 7
Collapsible 8
Collapsible 9
Collection Grid Disclosure
Color Watch Selector
Combobox 1
Combobox 10
Combobox 11
Combobox 12
Combobox 2
Combobox 3
Combobox 4
Combobox 5
Combobox 6
Combobox 7
Combobox 8
Combobox 9
Command Search
Command Search Base
Compose Email Card
Compose Email Card Base
Contact 1
Contact 2
Contact 3
Contact 4
Contact 5
Contact 6
Contact 7
Contextual Ai Bar
Continuous Pagination
Continuous Pagination Base
Continuous Tabs
Continuous Tabs Base
Copy
Copy Confirm
Copy Confirm Base
Create Community
Create Community Base
Create New Disclosure
Credit Usage Card
Credit Usage Card Base
Cta 1
Cta 2
Cta 3
Cta 4
Cta 5
Cursor
Data Table
Data Table 1
Data Table 10
Data Table 11
Data Table 12
Data Table 13
Data Table 2
Data Table 3
Data Table 4
Data Table 5
Data Table 6
Data Table 7
Data Table 8
Data Table 9
Date Picker 1
Date Picker 10
Date Picker 11
Date Picker 12
Date Picker 13
Date Picker 2
Date Picker 3
Date Picker 4
Date Picker 5
Date Picker 6
Date Picker 7
Date Picker 8
Date Picker 9
Demostack Dashboard: A responsive product-demo workspace with organization switching, resource discovery, team filtering, and light and dark themes.
Deployment Card
Deployment Card Base
Device
Dialog
Dialog 1
Dialog 10
Dialog 11
Dialog 12
Dialog 13
Dialog 14
Dialog 15
Dialog 16
Dialog 17
Dialog 18
Dialog 19
Dialog 2
Dialog 20
Dialog 21
Dialog 22
Dialog 23
Dialog 3
Dialog 4
Dialog 5
Dialog 6
Dialog 7
Dialog 8
Dialog 9
Dialog Stack
Dialog Stack Base
Discrete Tabs
Discrete Tabs Base
Dock
Draw Signature: Signature pad to draw a signature with the mouse or finger.
Draw Signature Base: Signature pad to draw a signature with the mouse or finger.
Drawer
Dropdown Disclosure
Dropdown Menu
Dropdown Menu 1
Dropdown Menu 10
Dropdown Menu 11
Dropdown Menu 12
Dropdown Menu 13
Dropdown Menu 14
Dropdown Menu 2
Dropdown Menu 3
Dropdown Menu 4
Dropdown Menu 5
Dropdown Menu 6
Dropdown Menu 7
Dropdown Menu 8
Dropdown Menu 9
E Commerce Dashboard
Edit Badge
Edit Profile
Edit Profile Base
Editable Chip
Emoji Spree Choice Chips
Erp Dashboard
Error 1
Error 2
Error 3
Error 4
Error 5
Error 6
Error 7
Event Reminders
Expand Details: Card that expands to show more details when clicked.
Expand Details Base: Card that expands to show more details when clicked.
Expandable Event Card
Expandable Event Card Base
Expandable Profile Card
Expandable Profile Card Base
Extended Toolbar
Family Receive Component
Family Receive Component Base
Family Wallet
Faq 1
Faq 2
Faq 3
Faq 4
Faq 5
Faq 6
Feature 1
Feature 2
Feature 3
Feature 4
Feature 5
Feature Tour
Feedback
Feedback Action
Feedback Action Base
File Upload
File Upload 1
File Upload 2
File Upload 3
File Upload 4
File Upload 5
Files
Filter Disclosure
Filter Disclosure Base
Flip: Flip button with a front face and a back face that turns over to show the other side.
Flip Card: Card that flips over in 3D to show its back face.
Flip Clock: Clock with split-flap digits that flip over as the time changes.
Floating Disclosure
Floating Disclosure Base
Floating Input
Floating Input Base
Fluid Tabs: Tabs with an indicator that flows smoothly from one tab to the selected one.
Fluid Tabs Base: Tabs with an indicator that flows smoothly from one tab to the selected one.
Footer 1
Footer 10
Footer 11
Footer 12
Footer 13
Footer 14
Footer 15
Footer 16
Footer 17
Footer 18
Footer 19
Footer 2
Footer 20
Footer 21
Footer 22
Footer 23
Footer 24
Footer 25
Footer 26
Footer 27
Footer 28
Footer 29
Footer 3
Footer 30
Footer 31
Footer 4
Footer 5
Footer 6
Footer 7
Footer 8
Footer 9
Form 1
Form 10
Form 2
Form 3
Form 4
Form 5
Form 6
Form 7
Form 8
Form 9
Fractional Picker
Fractional Picker Base
Frequency Selector
Frequency Selector Base
Fund Widget
Fund Widget Base
Gauge
Github Stars
Github Stars Wheel
Gooey Menu
Gooey Menu Base
Gridline Dashboard: A responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder workflows.
Hero 1
Hero 10
Hero 11
Hero 12
Hero 13
Hero 14
Hero 15
Hero 16
Hero 17
Hero 18
Hero 19
Hero 2
Hero 20
Hero 21
Hero 22
Hero 23
Hero 24
Hero 25
Hero 26
Hero 27
Hero 28
Hero 29
Hero 3
Hero 30
Hero 31
Hero 32
Hero 33
Hero 34
Hero 35
Hero 36
Hero 37
Hero 38
Hero 39
Hero 4
Hero 40
Hero 41
Hero 42
Hero 43
Hero 5
Hero 6
Hero 7
Hero 8
Hero 9
Hero1
Hover Card
Hrm
Icon
Incident Management
Inline Action
Inline Action Base
Inline Disclosure Menu
Inline Disclosure Menu Base
Inline Edit
Inline Edit Base
Inline Overflow
Inline Table Control
Inline Table Control Base
Inline Toast
Inline Toast Base
Input
Input Mask 1
Input Mask 2
Input Mask 3
Input Mask 4
Input Mask 5
Input Mask 6
Input Otp 1
Input Otp 10
Input Otp 2
Input Otp 3
Input Otp 4
Input Otp 5
Input Otp 6
Input Otp 7
Input Otp 8
Input Otp 9
Integration Card
Integration Card Base
Integrations 1
Integrations 2
Integrations 3
Integrations 4
Integrations 5
Invite Disclosure
Invoice Generator Dashboard
Invoice Manager Dashboard
Issue Tracking
Jobtracker Dashboard: A responsive job management workspace with customer records, job pipelines, estimates, drag-and-drop line items, and light and dark themes.
Journal Navigation
Journal Navigation Base
Knob Slider
Knob Slider Base
Label
Label Selector
Labeled Progress Indicator
Labeled Progress Indicator Base
Landing 01: A modern dark-themed landing page with animated hero section, stats, feature showcase, component bento grids, testimonials, and a full…
Layered Progressive Disclosure
Lead Dashboard
Library Dashboard: A responsive library management dashboard with collection metrics, circulation charts, branch switching, and intelligence alerts.
License Key
License Key Base
Liquid: Liquid button whose fill colour flows in on hover.
List Stack
List Stack Base
Luminia Luxe Realestate
Macos Sidebar
Macos Sidebar Base
Mail Dashboard
Management Bar
Marquee
Medesk Dashboard: A healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow with light and dark…
Meeting Card
Meeting Card Base
Meetings Dashboard
Minimal Carousel
Minimal Carousel Base
Mobile Video Player
Morphing Button
Morphing Button Base
Morphing Discovery Bar
Morphing Discovery Bar Base
Morphing Sidebar Controls
Motion Carousel
Navigation 1
Navigation 2
Navigation 3
Navigation 4
Navigation 5
Navigation 6
Navigation 7
Newsletter 1
Newsletter 2
Newsletter 3
Newsletter 4
Newsletter 5
Notification 1
Notification 2
Notification 3
Notification 4
Notification List
Onboarding Checklist
Onboarding Checklist Base
Onboarding Screen
Onboarding Screen Base
Onboarding Setup
Onboarding Setup Base
Option List
Option Picker
Pagination
Pagination 1
Pagination 10
Pagination 11
Pagination 12
Pagination 13
Pagination 14
Pagination 15
Pagination 2
Pagination 3
Pagination 4
Pagination 5
Pagination 6
Pagination 7
Pagination 8
Pagination 9
Pagination Animated
Pagination Base
Payment Operations Dashboard
Pin Item
Pin Item Base
Pin List
Playful Todolist: To-do list with playful animations when an item is checked off.
Pop Stepper: Step indicator whose steps pop with a spring as they complete.
Pop Stepper Base: Step indicator whose steps pop with a spring as they complete.
Popover
Popover 1
Popover 10
Popover 11
Popover 12
Popover 2
Popover 3
Popover 4
Popover 5
Popover 6
Popover 7
Popover 8
Popover 9
Portfolio Dashboard
Predictive Text
Predictive Text Base
Preview Link Card
Pricing 1
Pricing 2
Pricing 3
Pricing 4
Pricing 5
Pricing Widget
Pricing Widget Base
Primary Button
Profile Card
Profile Card Base
Progress
Progressive Input Stack
Progressive Input Stack Base
Project Management Dashboard
Quick Feedback
Quick Feedback Base
Quick Option Picker
Quick Option Picker Base
Quick Paste
Quick Paste Base
Quick Switcher
Quick Switcher Base
Radial Carousel
Radial Carousel Base
Radial Intro
Radial Nav
Radio Group
Radiogroup 1
Radiogroup 10
Radiogroup 11
Radiogroup 12
Radiogroup 13
Radiogroup 2
Radiogroup 3
Radiogroup 4
Radiogroup 5
Radiogroup 6
Radiogroup 7
Radiogroup 8
Radiogroup 9
Range Selection Slider
Range Selection Slider Base
Returns Calculator Snippet
Returns Calculator Snippet Base
Reveal Copy
Reveal Copy Base
Revealing Cards
Revealing Cards Base
Ripple
Run Action Button
Run Action Button Base
Run Widget
Run Widget Base
Sales Dashboard
Save Toggle
Save Toggle Base
Schedule Button
Schedule Date
Schedule Date Base
Scroll Fade: Scroll area whose edges fade out to hint that there is more content to scroll.
Scroll Island
Scroll Island Base
Scrub Slider
Scrub Slider Base
Select
Select 1
Select 10
Select 11
Select 12
Select 13
Select 14
Select 15
Select 16
Select 17
Select 18
Select 19
Select 2
Select 20
Select 21
Select 22
Select 23
Select 24
Select 25
Select 26
Select 27
Select 28
Select 29
Select 3
Select 30
Select 31
Select 32
Select 33
Select 34
Select 35
Select 36
Select 4
Select 5
Select 6
Select 7
Select 8
Select 9
Select Ai Agent
Select Ai Agent Base
Send Money
Send Money Base
Separator
Share Button
Share Sheet
Share Sheet Base
Sheet
Sheet 1
Sheet 2
Sheet 3
Sheet 4
Sheet 5
Sheet 6
Sheet 7
Shimmer Button: Button with a strip of light that sweeps across it on hover.
Shimmer Button Base: Button with a strip of light that sweeps across it on hover.
Show Qr
Show Qr Base
Shuffle Pinned Item
Shuffle Pinned Item Base
Sidebar
Skeleton
Slot Picker
Spinner
Split Actions
Split Actions Base
Split Button
Split Button Base
Split To Edit
Split To Edit Base
Stats 1
Stats 2
Stats 3
Stats 4
Status Indicator
Status Picker
Status Picker Base
Step Indicator
Step Indicator Base
Step Pager
Step Pager Base
Stepper
Stepper Base
Subscription Calendar
Subscription Calendar Base
Swap Currency Card
Swap Currency Card Base
Swap Form
Switch
Switch 1
Switch 10
Switch 11
Switch 12
Switch 13
Switch 14
Switch 15
Switch 16
Switch 17
Switch 18
Switch 2
Switch 3
Switch 4
Switch 5
Switch 6
Switch 7
Switch 8
Switch 9
Switch Disclosure
Switch Mode
Switch Mode Base
Table
Table 1
Table 10
Table 11
Table 12
Table 13
Table 14
Table 15
Table 16
Table 2
Table 3
Table 4
Table 5
Table 6
Table 7
Table 8
Table 9
Tabs
Tags
Tallie Dashboard: An expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
Task Management Dashboard
Task Widget Disclosure
Team 1
Team 2
Team 3
Team 4
Team 5
Terminal
Testimonials 1
Testimonials 2
Testimonials 3
Testimonials 4
Text Gradient
Textarea
Textarea 1
Textarea 10
Textarea 11
Textarea 12
Textarea 13
Textarea 14
Textarea 15
Textarea 16
Textarea 17
Textarea 18
Textarea 19
Textarea 2
Textarea 20
Textarea 21
Textarea 3
Textarea 4
Textarea 5
Textarea 6
Textarea 7
Textarea 8
Textarea 9
Theme Toggler
Timed Undo Action
Timed Undo Action Base
Timeline
Toggle
Toggle Group
Tooltip
Tooltip 1
Tooltip 10
Tooltip 11
Tooltip 12
Tooltip 13
Tooltip 14
Tooltip 15
Tooltip 2
Tooltip 3
Tooltip 4
Tooltip 5
Tooltip 6
Tooltip 7
Tooltip 8
Tooltip 9
Tooltip Animated
Tooltip Navbar
Tooltip Navbar Base
Tooltip Radix
Trade Summary
Trade Summary Base
Transaction List
Transaction List Base
Transcribe Voice Message
Tree Menu
Tree Menu Base
Uniswap Dialog
Uniswap Dialog Base
User Presence Avatar
Vertical Tooltip Navbar
Vertical Tooltip Navbar Base
View On Map
View On Map Base
Voice Chat Disclosure
Voice Note
Voice Note Base
Voice Transcribe
Voice Transcribe Base
Waveform Scrub
Waveform Scrub Base
Web3 Dashboard
Weight Widget
Weight Widget Base
Widget 1
Widget 2
Widget 3
Widget 4
Widget 5
Widget 6
Widget 7
Widget 8
Widget 9
Wiggling Cards
Wiggling Cards Base
Workflow Management Dashboard
X Post

Watermelon UI components

All Watermelon UI components

Browse by category