Customize any component with live controls - tweak colors, spacing, radius, shadow, and animation. Copy the HTML and CSS, or download as files.
Primary Button
Main call-to-action button
Secondary Button
Subdued second-priority action
Outline Button
Transparent button with visible border
Ghost Button
Minimal button with hover background reveal
Loading Button
Button with animated spinner state
Gradient Button
Button with colourful gradient fill
Text Input
Standard single-line text field
Textarea
Multi-line text input field
Toggle Switch
On/off toggle with smooth animation
Checkbox
Styled checkbox with custom checkmark
Select Dropdown
Native select with custom styling
Basic Card
General-purpose content card
Profile Card
User profile with avatar, name and bio
Stat Card
Metric card with value, label and trend
Feature Card
Highlight a product feature or service
Pricing Card
Plan with price, features and CTA
Tabs
Horizontal tab navigation with indicator
Pagination
Page navigation with prev/next controls
Breadcrumb
Hierarchical location indicator
Pill Navigation
Horizontal pill-style filter or category nav
Alert Banner
Status message for info, success, warning and error
Badge
Small label for status, count or category
Progress Bar
Visual fill indicator for completion or loading
Skeleton Loader
Placeholder while content is loading
Toast Notification
Non-blocking short-lived message
Avatar
User photo or initials with status indicator
Avatar Group
Stacked overlapping avatars with overflow count
Tag / Chip
Label with optional remove and icon
Data Table
Structured table with header and rows
List Item
Row item with icon, title, meta and actions
Icon Button
Square icon-only button with tooltip
Floating Action Button
Fixed-position primary action button
Destructive Button
Red danger button with confirm pattern
Link Button
Inline text button that looks like a hyperlink
Search Bar
Search input with icon and clear button
Radio Group
Single-select option group
Range Slider
Dual-handle price/value range input
File Upload
Drag and drop file upload area
OTP Input
One-time password digit boxes
Image Card
Card with header image, category tag and CTA
Testimonial Card
Quote with avatar, name and rating stars
Notification Card
App notification item with icon, time, and actions
Horizontal Card
Side-by-side image and content layout
Glass Card
Frosted glass morphism card with blur backdrop
Sidebar Nav
Vertical navigation menu with icons and sections
Dropdown Menu
Trigger button with popup menu items
Stepper
Multi-step progress indicator
Bottom Navigation Bar
Mobile-style fixed bottom tab bar
Tag Filter
Multi-select tag cloud for filtering
Top Navigation Bar
App header with logo, links, and action buttons
Spinner
Classic CSS border-spin loading indicator
Empty State
Illustrated empty/zero-data placeholder
Star Rating
Interactive star rating with half-star support
Notification Dot
Badge dots on icons and avatars for unread counts
Error State
Full error / broken state component with retry
KPI Card
Key metric with trend, sparkline and comparison
Dismissible Chips
Tag chips with remove/close button
Timeline
Vertical activity timeline with dates and icons
Stats Row
Horizontal row of key statistics with dividers
Code Block
Syntax-highlighted code snippet with copy button
Bouncing Dots
Three dots bouncing in sequence
Pulse Ring
Expanding ring pulse animation
Loading Bars
Equalizer-style bar animation
Skeleton Card
Animated shimmer placeholder for a card
Skeleton List
Repeating shimmer rows for table/list data
Animated Progress Bar
Indeterminate sliding progress bar
Wave Loader
Sine-wave flowing dot animation
Ripple Loader
Concentric expanding circles ripple
Orbit Loader
Planet orbiting a central core
Bouncing Ball
Ball with shadow that squishes on landing
Typing Indicator
Chat-style typing bubble with dots
Gradient Shimmer Bar
Animated gradient shimmer sweep bar
Circular Progress
SVG circle progress with percentage label
Flip Loader
3D flipping square animation
Spinning Rings
Concentric rings spinning at different speeds
Fade Dots
Dots that fade in/out in a circular arrangement
Matrix Grid Loader
Grid of squares fading in sequence
Metric Card
Dashboard KPI card with sparkline trend
Bar Chart
Vertical bar chart with labels and tooltip effect
Activity Feed
Scrollable chronological activity log
Stat Grid
2×2 or 4-column grid of stat cards
Task Progress
Project task list with completion progress bars
Donut Chart
CSS conic-gradient donut with legend
Sortable dashboard table with status badges
Notification Panel
Dropdown notification center with tabs
User Profile Card
Dashboard profile widget with stats and actions
Quick Actions
Icon grid of frequent shortcut actions
Revenue Card
Financial metric card with period comparison
Line Chart
Multi-line SVG chart with area fill
Dashboard Search
Full-width search with recent and shortcut badge
Skill Bars
Horizontal progress bars showing skill levels
Recent Files
File list widget with type icons and metadata
Hourglass Loader
Rotating hourglass CSS animation
Dual Ring Spinner
Two counter-rotating rings spinner
Glow Pulse
Glowing circle with radial pulse animation
Project Card
Kanban-style project summary with avatars and progress
Todo List Widget
Checkable task list with priority indicators
Analytics Summary
Top-level analytics overview with sparklines
Dashboard Page Header
Section header with breadcrumb, title, and action buttons
Calendar Widget
Mini month calendar with event dots
App Sidebar
Full app sidebar with logo, grouped nav, and user footer
Dark Sidebar
Dark-themed sidebar with accent highlights
Icon-only Sidebar
Collapsed icon-rail sidebar with tooltips
Settings Sidebar
Settings panel sidebar with grouped sections and icons
Nested Tree Sidebar
Multi-level collapsible tree navigation
Floating Drawer
Overlay drawer with backdrop scrim and slide animation
Filter Sidebar
E-commerce style filter panel with checkboxes and range
Docs Sidebar
Documentation site sidebar with version badge and search
Dashboard Sidebar
Rich sidebar with inline stats, avatars, and workspace switcher
Floating Sidebar
Detached floating card-style sidebar with rounded corners