Watermelon UI: Free React UI Component Library with 600+ Components

Watermelon UI is a free, open-source React UI component library for Tailwind CSS 4.

It includes 600+ standard and animated component variants, plus reusable page blocks, dashboards, and a landing-page template.

Install individual components as editable TSX through a shadcn-compatible registry.

Official Website

Browse All Components

Features

500+ standard variants for form controls, tables, navigation, dialogs, and other everyday UI components.
100+ animated components, including interactive cards, command menus, carousels, and sliders.
React page blocks styled with Tailwind CSS for hero sections, pricing, login screens, navigation, and footers.
Ready-made dashboards for finance, healthcare, job management, and analytics.
Editable TSX files installed individually through the shadcn registry.
Tailwind CSS styling, with theme-aware base variants for animated components.
MIT license for personal and commercial projects.

How to Install Watermelon UI

Initialize shadcn in a new Next.js project:

npx shadcn@latest init --template next

Install a UI component in your app.

npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian.json

Basic Usage

The registry item writes components/watermelon/card-split-accordian.tsx, which exports AccordionApp. Use the component in a Next.js App Router client file:

"use client";
import { AccordionApp } from "@/components/watermelon/card-split-accordian";
import { CreditCard, ShieldCheck } from "lucide-react";
const items = [
  {
    id: 1,
    title: "Billing",
    icon: <CreditCard size={20} />,
    content: "Manage payment methods and download invoices.",
  },
  {
    id: 2,
    title: "Account security",
    icon: <ShieldCheck size={20} />,
    content: "Update your password and review sign-in activity.",
  },
];
export default function AccountSettingsHelp() {
  return <AccordionApp items={items} />;
}

Styling and Theme Variants

Edit the installed TSX file to change Tailwind classes, layout, and animations.

npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian-base.json

Available UI Components

Standard React Component Variants

Each numbered variant has its own registry entry. For example, install Accordion 1 with npx shadcn@latest add https://registry.watermelon.sh/r/accordion-1.json.

Accordion: Accordion 1, Accordion 2, Accordion 3, Accordion 4, Accordion 5, Accordion 6, Accordion 7, Accordion 8, Accordion 9, Accordion 10, Accordion 11, Accordion 12, Accordion 13, Accordion 14, Accordion 15, Accordion 16
Alerts: Alert 1, Alert 2, Alert 3, Alert 4, Alert 5, Alert 6, Alert 7, Alert 8, Alert 9, Alert 10, Alert 11, Alert 12, Alert 13, Alert 14, Alert 15, Alert 16, Alert 17, Alert 18, Alert 19, Alert 20, Alert 21, Alert 22, Alert 23, Alert 24, Alert 25, Alert 26, Alert 27, Alert 28, Alert 29, Alert 30
Avatar: Avatar 1, Avatar 2, Avatar 3, Avatar 4, Avatar 5, Avatar 6, Avatar 7, Avatar 8, Avatar 9, Avatar 10, Avatar 11, Avatar 12, Avatar 13, Avatar 14, Avatar 15, Avatar 16, Avatar 17, Avatar 18, Avatar 19, Avatar 20, Avatar 21
Badge: Badge 1, Badge 2, Badge 3, Badge 4, Badge 5, Badge 6, Badge 7, Badge 8, Badge 9, Badge 10, Badge 11, Badge 12, Badge 13, Badge 14, Badge 15, Badge 16, Badge 17, Badge 18, Badge 19, Badge 20, Badge 21, Badge 22, Badge 23, Badge 24
Breadcrumb: Breadcrumb 1, Breadcrumb 2, Breadcrumb 3, Breadcrumb 4, Breadcrumb 5, Breadcrumb 6, Breadcrumb 7, Breadcrumb 8
Button: Button 1, Button 2, Button 3, Button 4, Button 5, Button 6, Button 7, Button 8, Button 9, Button 10, Button 11, Button 12, Button 13, Button 14, Button 15, Button 16, Button 17, Button 18, Button 19, Button 20, Button 21, Button 22, Button 23, Button 24, Button 25, Button 26, Button 27, Button 28, Button 29, Button 30, Button 31, Button 32, Button 33, Button 34, Button 35, Button 36, Button 37, Button 38
Button Group: ButtonGroup 1, ButtonGroup 2, ButtonGroup 3, ButtonGroup 4, ButtonGroup 5, ButtonGroup 6, ButtonGroup 7, ButtonGroup 8, ButtonGroup 9, ButtonGroup 10, ButtonGroup 11, ButtonGroup 12
Calendar: Calendar 1, Calendar 2, Calendar 3, Calendar 4, Calendar 5, Calendar 6, Calendar 7, Calendar 8, Calendar 9, Calendar 10, Calendar 11, Calendar 12, Calendar 13, Calendar 14, Calendar 15, Calendar 16, Calendar 17, Calendar 18, Calendar 19, Calendar 20, Calendar 21, Calendar 22, Calendar 23, Calendar 24, Calendar 25
Card: Card 1, Card 2, Card 3, Card 4, Card 5, Card 6, Card 7, Card 8, Card 9, Card 10, Card 11, Card 12, Card 13, Card 14, Card 15
Checkbox: Checkbox 1, Checkbox 2, Checkbox 3, Checkbox 4, Checkbox 5, Checkbox 6, Checkbox 7, Checkbox 8, Checkbox 9, Checkbox 10, Checkbox 11, Checkbox 12, Checkbox 13, Checkbox 14, Checkbox 15, Checkbox 16
Collapsible: Collapsible 1, Collapsible 2, Collapsible 3, Collapsible 4, Collapsible 5, Collapsible 6, Collapsible 7, Collapsible 8, Collapsible 9
Combobox: Combobox 1, Combobox 2, Combobox 3, Combobox 4, Combobox 5, Combobox 6, Combobox 7, Combobox 8, Combobox 9, Combobox 10, Combobox 11, Combobox 12
Data Table: DataTable 1, DataTable 2, DataTable 3, DataTable 4, DataTable 5, DataTable 6, DataTable 7, DataTable 8, DataTable 9, DataTable 10, DataTable 11, DataTable 12, DataTable 13
Date Picker: DatePicker 1, DatePicker 2, DatePicker 3, DatePicker 4, DatePicker 5, DatePicker 6, DatePicker 7, DatePicker 8, DatePicker 9, DatePicker 10, DatePicker 11, DatePicker 12, DatePicker 13
Dialog: Dialog 1, Dialog 2, Dialog 3, Dialog 4, Dialog 5, Dialog 6, Dialog 7, Dialog 8, Dialog 9, Dialog 10, Dialog 11, Dialog 12, Dialog 13, Dialog 14, Dialog 15, Dialog 16, Dialog 17, Dialog 18, Dialog 19, Dialog 20, Dialog 21, Dialog 22, Dialog 23
Dropdown Menu: Dropdown Menu 1, Dropdown Menu 2, Dropdown Menu 3, Dropdown Menu 4, Dropdown Menu 5, Dropdown Menu 6, Dropdown Menu 7, Dropdown Menu 8, Dropdown Menu 9, Dropdown Menu 10, Dropdown Menu 11, Dropdown Menu 12, Dropdown Menu 13, Dropdown Menu 14
Form: Form 1, Form 2, Form 3, Form 4, Form 5, Form 6, Form 7, Form 8, Form 9, Form 10
Input Mask: Input Mask 1, Input Mask 2, Input Mask 3, Input Mask 4, Input Mask 5, Input Mask 6
Input OTP: Input OTP 1, Input OTP 2, Input OTP 3, Input OTP 4, Input OTP 5, Input OTP 6, Input OTP 7, Input OTP 8, Input OTP 9, Input OTP 10
Pagination: Pagination 1, Pagination 2, Pagination 3, Pagination 4, Pagination 5, Pagination 6, Pagination 7, Pagination 8, Pagination 9, Pagination 10, Pagination 11, Pagination 12, Pagination 13, Pagination 14, Pagination 15
Popover: Popover 1, Popover 2, Popover 3, Popover 4, Popover 5, Popover 6, Popover 7, Popover 8, Popover 9, Popover 10, Popover 11, Popover 12
Radio Group: Radio Group 1, Radio Group 2, Radio Group 3, Radio Group 4, Radio Group 5, Radio Group 6, Radio Group 7, Radio Group 8, Radio Group 9, Radio Group 10, Radio Group 11, Radio Group 12, Radio Group 13
Select: Select 1, Select 2, Select 3, Select 4, Select 5, Select 6, Select 7, Select 8, Select 9, Select 10, Select 11, Select 12, Select 13, Select 14, Select 15, Select 16, Select 17, Select 18, Select 19, Select 20, Select 21, Select 22, Select 23, Select 24, Select 25, Select 26, Select 27, Select 28, Select 29, Select 30, Select 31, Select 32, Select 33, Select 34, Select 35, Select 36
Sheet: Sheet 1, Sheet 2, Sheet 3, Sheet 4, Sheet 5, Sheet 6, Sheet 7
Sonner: Sonner 1, Sonner 2, Sonner 3, Sonner 4, Sonner 5, Sonner 6, Sonner 7, Sonner 8, Sonner 9, Sonner 10, Sonner 11, Sonner 12, Sonner 13, Sonner 14, Sonner 15, Sonner 16, Sonner 17, Sonner 18, Sonner 19, Sonner 20
Switch: Switch 1, Switch 2, Switch 3, Switch 4, Switch 5, Switch 6, Switch 7, Switch 8, Switch 9, Switch 10, Switch 11, Switch 12, Switch 13, Switch 14, Switch 15, Switch 16, Switch 17, Switch 18, Switch 19, Switch 20
Table: Table 1, Table 2, Table 3, Table 4, Table 5, Table 6, Table 7, Table 8, Table 9, Table 10, Table 11, Table 12, Table 13, Table 14, Table 15, Table 16
Tabs: Tabs 1, Tabs 2, Tabs 3, Tabs 4, Tabs 5, Tabs 6, Tabs 7, Tabs 8, Tabs 9, Tabs 10, Tabs 11, Tabs 12, Tabs 13, Tabs 14, Tabs 15, Tabs 16, Tabs 17, Tabs 18, Tabs 19, Tabs 20, Tabs 21, Tabs 22, Tabs 23, Tabs 24, Tabs 25, Tabs 26
Textarea: Textarea 1, Textarea 2, Textarea 3, Textarea 4, Textarea 5, Textarea 6, Textarea 7, Textarea 8, Textarea 9, Textarea 10, Textarea 11, Textarea 12, Textarea 13, Textarea 14, Textarea 15, Textarea 16, Textarea 17, Textarea 18, Textarea 19, Textarea 20, Textarea 21
Tooltip: Tooltip 1, Tooltip 2, Tooltip 3, Tooltip 4, Tooltip 5, Tooltip 6, Tooltip 7, Tooltip 8, Tooltip 9, Tooltip 10, Tooltip 11, Tooltip 12, Tooltip 13, Tooltip 14, Tooltip 15

Animated React Components

Accordian: Card Split Accordian
Action: Inline Action
Buttons: Family Receive Button, Morphing Button, Run Action Button, Save Toggle, Shimmer Button, Split Button, stepper, Timed Undo Action
Cards: Budget Card, Compose Email Card, Credit Usage Card, Deployment Card, Expandable Event Card, Expandable Profile Card, Integration Card, Meeting Card, Onboarding Checklist, Onboarding Screen, Onboarding Setup, Profile Card, Returns Calculator Snippet, Subscription Calendar, Trade Summary
Carousel: Minimal Carousel, Radial Carousel, Wiggling Cards
Choice Chips: Emoji Spree Choice Chips
Dialog: Create Community, Dialog Stack, Edit Profile, Uniswap Dialog
Disclosure: Activities Card, Add Cash Disclosure, Create New Disclosure, Inline Overflow, Invite Disclosure, Switch Disclosure, Task Widget Disclosure
Dropdown: Inline Disclosure Menu
Filters: Filter Disclosure
Inputs: Draw Signature, Floating Input
Interaction: Card Swipe, Carousel Slider, Edit Badge, Layered Progressive Disclosure, Morphing Sidebar Controls, Schedule Button, Slot Picker, Swap Form, Tags, Voice Chat Disclosure
Lists: Pin Item, Shuffle Pinned List
Map: View On Map
Marketing: Changeable Pricing Section
Media: Waveform Scrub
Micro Interaction: Aave Swap Component, Card Cue, Carousel Navigator, Collection Grid Disclosure, Contextual AI Bar, Copy Confirm, Dock Component, Dropdown Disclosure, Editable Chip, Event Reminders, Expand Details, Extended Toolbar, Family Wallet, Feature Tour, Feedback, Feedback Action, Fractional Picker, Inline Edit, Inline Table Control, Inline Toast, Labeled Progress Indicator, Licence Key, List Stack, Pop Stepper, Predictive Text, Quick Feedback, Quick Option Picker, Quick Paste, Quick Switcher, Reveal Copy, Revealing Cards, Scroll Island, Scrub Slider, Select AI Agent, Send Money, Split Actions, Split To edit, Status Picker, Step Indicator, Step Pager, Transaction List, Voice Note, Voice Transcribe
Navigation: Command Search, Journal Navigation, macOS Sidebar, Tree-menu
Pagination: Continuous Pagination, Pagination
Popover: Floating Disclosure
Scheduler: Schedule Date
Sliders: Adaptive Slider, Knob Slider
Tabs: Continuous Tabs, Discrete Tabs, Fluid Tabs, Frequency Selector, Morphing Discovery Bar
Toggle: Switch Mode
Tooltip: Gooey Menu, Tooltip Navbar, Vertical Tooltip Navbar
Widgets: Calendar Widget, Fund Widget, Pricing Widget, Progressive Input Stack, Range Selection Slider, Run Widget, share sheet, Show QR, Swap Currency Card, Weight Widget

Blocks, Dashboards, and Templates

Page Block Categories

Announcement Bar, Login Page, Bento, Blog, Careers, Contact, CTA, Error Page, FAQ, Features, File Upload, Footer, Hero, Integrations, Navbar, Newsletter, Notification, Pricing, Stats, Team, Testimonials, Widget.

Dashboard Templates

Agndex Dashboard, Astrix Dashboard, Bionis Dashboard, Capitalio Dashboard, Demostack Dashboard, Gridline Dashboard, Jobtracker Dashboard, Library Dashboard, Medesk Dashboard, portfolio Dashboard, Tallie Dashboard, Web3 Dashboard.