Introduction
ParamUI is an open-source collection of 187+ reusable React components built with Tailwind CSS. Each component is designed to be accessible, customizable, and easy to drop into any project — no package installation required.
GitHub Repository — Coming Soon
Our repository will become public soon. You'll be able to star, fork, and contribute. In the meantime, browse the components here and copy whatever you need.
Philosophy
Own Your Code
Copy source directly into your project. No version mismatches, no dependency hell, no lock-in.
Minimal Dependencies
Only clsx and tailwind-merge required. All charts are pure SVG — zero charting libraries.
Accessible First
Semantic HTML, ARIA attributes, focus management, and keyboard navigation throughout.
Themeable with CSS Variables
Light & dark mode via CSS custom properties. Swap design tokens to match your brand instantly.
How it works
Browse
Explore 187 components across 16 categories with live interactive previews.
Copy
Click the Copy button to grab the component source code. Each file is self-contained.
Paste & Ship
Drop it into your project. Customize styles, props, and logic to your heart's content.
Quick Setup
Components rely on a tiny cn() utility for merging Tailwind classes. Install these two packages:
npm install clsx tailwind-merge
Then create lib/utils.js:
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs) {
return twMerge(clsx(inputs));
}That's it — you're ready to start copying components. No global providers, context wrappers, or config files needed.
What's Included
187 components organized into 16 categories covering everything from basic form inputs to advanced AI chat interfaces, e-commerce blocks, drag-and-drop interactions, and SVG charts.
Base
10 components
Form
24 components
Layout
11 components
Navigation
15 components
Overlay & Feedback
16 components
Data Display
15 components
Typography
7 components
Media
8 components
Disclosure
5 components
Loading
8 components
Charts
14 components
DnD & Interaction
10 components
Auth & User
8 components
Commerce
10 components
AI & Chat
12 components
Utility
14 components
All Components
187 components across 16 categories.
Base (10)
Button
Versatile button with multiple variants, sizes, and states.
Input
Styled text input supporting all native input types.
Label
Accessible form label with required indicator support.
Card
Flexible content container with header, body, and footer sections.
Badge
Small status indicator with color variants.
Textarea
Multi-line text input with auto-resize support.
Select
Native dropdown select with custom styling.
Switch
Toggle switch for boolean settings.
Separator
Visual divider for separating content sections.
Avatar
User avatar with image and fallback initials support.
Form (24)
Checkbox
Styled checkbox with label and indeterminate state.
Radio Group
Radio button group for single-option selection.
Slider
Range slider for numeric value selection.
Toggle
Pressable toggle button with on/off states.
Toggle Group
Group of toggles for multi-option selection.
Combobox
Searchable dropdown with autocomplete filtering.
Multi Select
Multi-value selector with tag-based display.
Date Picker
Calendar-based date selection input.
Date Range Picker
Dual calendar for selecting date ranges.
Time Picker
Time selection with hour and minute inputs.
Color Picker
Visual color picker with hex input.
File Input
Drag-and-drop file upload with preview.
OTP Input
One-time password input with individual digit boxes.
Search Input
Search field with icon and clear button.
Number Input
Numeric input with increment and decrement controls.
Password Input
Password field with visibility toggle.
Phone Input
Phone number input with country code selector.
Currency Input
Currency-formatted numeric input.
Tag Input
Input for adding and removing text tags.
Rating
Star rating selector with hover preview.
Signature Pad
Canvas-based signature capture pad.
Rich Text Editor
WYSIWYG text editor with formatting toolbar.
Code Editor
Syntax-highlighted code input with line numbers.
Form
Form wrapper with field validation and error display.
Layout (11)
Container
Centered max-width content wrapper.
Grid
CSS Grid layout with responsive columns.
Stack
Vertical or horizontal stack with consistent spacing.
Flex
Flexbox layout helper with alignment props.
Aspect Ratio
Container that maintains a fixed aspect ratio.
Box
Generic styled container with padding and border.
Center
Centers content both horizontally and vertically.
Resizable
Container with draggable resize handle.
Masonry
Pinterest-style masonry grid layout.
Split Pane
Dual-pane layout with adjustable divider.
Sticky
Element that sticks to viewport on scroll.
Navigation (15)
Navbar
Top navigation bar with brand, links, and actions.
Sidebar Nav
Vertical sidebar navigation with groups.
Breadcrumb
Hierarchical navigation breadcrumb trail.
Tabs
Horizontal tabbed content switcher.
Vertical Tabs
Vertically oriented tab navigation.
Pagination
Page navigation with numbered links.
Stepper
Multi-step progress indicator with navigation.
Menu
Dropdown menu with items and separators.
Menubar
Horizontal menu bar with dropdown triggers.
Command
Command palette with search and keyboard navigation.
Link
Styled anchor link with variant support.
Skip Link
Accessibility skip-to-content navigation link.
Dock
macOS-style dock with hover magnification effect.
Bottom Navigation
Mobile bottom tab navigation bar.
Nav Drawer
Slide-out navigation drawer panel.
Overlay & Feedback (16)
Dialog
Modal dialog with backdrop and close button.
Alert Dialog
Confirmation dialog with cancel and action buttons.
Drawer
Slide-in panel from any screen edge.
Sheet
Bottom sheet overlay with header and content.
Popover
Floating content panel anchored to a trigger.
Tooltip
Small informational popup on hover.
Toast
Temporary notification message with auto-dismiss.
Sonner
Stacked toast notification system.
Snackbar
Brief message bar with optional action button.
Banner
Full-width announcement or alert banner.
Alert
Contextual alert message with icon and variants.
Notification Badge
Numeric or dot badge for notifications.
Confirmation
Action confirmation dialog with customizable buttons.
Loading Overlay
Full-screen loading spinner overlay.
Context Menu
Right-click context menu with items.
Dropdown Menu
Dropdown menu triggered by a button click.
Data Display (15)
Table
Structured data table with header and body rows.
Data Table
Feature-rich table with sorting and selection.
List
Vertical list with icons and secondary text.
Definition List
Term-description pair listing.
Tree
Hierarchical tree view with expand and collapse.
Timeline
Vertical timeline of events with timestamps.
Calendar
Month calendar grid with day selection.
Avatar Group
Stacked group of avatar images with overflow count.
Tag
Dismissible label tag with color variants.
Code Block
Syntax-highlighted code display with copy button.
Inline Code
Inline code snippet with monospace styling.
Stat Card
Statistic display card with trend indicator.
Empty State
Placeholder view for empty data or search results.
Diff View
Side-by-side or inline code diff viewer.
JSON Viewer
Collapsible JSON data tree viewer.
Typography (7)
Heading
Semantic heading with level and size variants.
Text
Styled text paragraph with size and color options.
Blockquote
Styled quotation block with optional attribution.
Kbd
Keyboard key indicator badge.
Mark
Highlighted text marker with color variants.
Truncate
Text truncation with expand on click.
Gradient Text
Text with animated gradient color fill.
Media (8)
Image
Responsive image with loading state and fallback.
Avatar Image
Circular avatar image with fallback placeholder.
Video Player
HTML5 video player with custom controls.
Audio Player
Audio player with playback controls and progress.
Carousel
Image and content carousel with navigation arrows.
Gallery
Responsive image gallery grid.
Lightbox
Full-screen image viewer overlay.
Icon
SVG icon wrapper with size variants.
Disclosure (5)
Loading (8)
Spinner
Animated loading spinner indicator.
Skeleton
Content placeholder loading skeleton.
Progress Bar
Horizontal progress bar with label.
Circular Progress
Circular ring progress indicator.
Loading Dots
Animated bouncing dots loader.
Pulse
Pulsing animation placeholder.
Upload Progress
File upload progress with percentage display.
Step Progress
Multi-step progress tracker with labels.
Charts (14)
Bar Chart
Vertical bar chart with multiple datasets.
Line Chart
Line chart with data points and grid.
Area Chart
Filled area chart with gradient shading.
Pie Chart
Pie or donut chart with legend.
Scatter Plot
X-Y scatter plot with data points.
Radar Chart
Radar/spider chart for multi-axis data.
Heatmap
Color-coded data density heatmap grid.
Funnel Chart
Funnel visualization for conversion data.
Treemap Chart
Treemap chart for hierarchical data visualization.
Gauge
Gauge meter chart for single metric values.
Sparkline
Compact inline trend chart.
Chart Tooltip
Tooltip overlay for chart data points.
Chart Legend
Interactive chart legend with color toggles.
Candlestick
Financial candlestick OHLC chart.
DnD & Interaction (10)
Drag Drop List
Reorderable list with drag-and-drop.
Kanban Board
Kanban board with draggable columns and cards.
Sortable Grid
Grid of items with drag-to-reorder.
Draggable
Wrapper that makes any element draggable.
Drop Zone
File or element drop target area.
Resizable Handle
Draggable handle for resizing elements.
Pan Zoom
Pannable and zoomable content container.
Infinite Scroll
Automatic content loading on scroll.
Virtual List
Virtualized list for rendering large datasets.
Scroll Area
Custom scrollbar container.
Auth & User (8)
Login Form
Email and password login form.
Register Form
User registration form with validation.
Password Strength
Password strength meter and indicator.
Social Login Buttons
OAuth provider login buttons.
Two Factor Auth
Two-factor authentication code input.
User Menu
User profile dropdown menu.
Profile Card
User profile information card.
Account Settings
Account settings form with sections.
Commerce (10)
Product Card
E-commerce product card with image and pricing.
Cart Item
Shopping cart line item with quantity controls.
Cart Summary
Order summary with totals and checkout button.
Price Tag
Price display with discount and original price.
Rating Reviews
Star rating breakdown with review count.
Checkout Form
Shipping information checkout form.
Payment Card Input
Credit card payment form fields.
Order Status
Order tracking with step progress indicator.
Coupon Input
Coupon code input with apply button.
Wishlist Button
Toggle button for wishlisting items.
AI & Chat (12)
Chat Bubble
Chat message bubble with sender styling.
Chat Input
Message input with send button.
Typing Indicator
Animated typing/thinking dots indicator.
Streaming Text
Character-by-character text streaming display.
Prompt Suggestions
Clickable prompt suggestion chips.
Thread List
Chat thread and conversation list.
Tool Call Block
AI tool call display with input and output.
Markdown Renderer
Markdown-to-HTML content renderer.
Copy Button
Click-to-copy text button with feedback.
Feedback Buttons
Thumbs up and down response feedback.
Citation Chip
Numbered citation reference chip.
Model Selector
AI model selection dropdown.
Utility (14)
Visually Hidden
Screen-reader-only hidden content.
Portal
Renders children into a DOM portal.
Slot
Flexible child composition slot.
Theme Provider
Theme context provider with persistence.
Dark Mode Toggle
Light and dark mode switch button.
Keyboard Shortcut
Keyboard shortcut key display.
Hotkey Listener
Global keyboard hotkey event handler.
Error Boundary
React error boundary with fallback UI.
Feature Flag
Feature flag conditional renderer.
Print Layout
Print-optimized layout wrapper.
Confetti
Celebration confetti particles animation.
Cursor Follower
Custom cursor-following element.
Tour
Step-by-step product tour overlay.
Annotation
Colored annotation and callout block.