Component Gallery

Stat card with CSS sparkline, trend arrow, and percentage change indicator

CSS-only area chart with gradient fill, axis labels, and hover interaction

Timeline of events with avatars, timestamps, action badges, and connecting line

Circular progress ring using SVG with animated stroke, center value, and label

GitHub-style contribution heatmap with intensity coloring and tooltip labels

Side-by-side metric comparison with visual progress bars and delta indicators

Compact dashboard card with 3 KPIs, mini bar chart, and trend summary

Team member list with avatar stack, status indicators, and recent actions

Visual conversion funnel with 4 stages, percentages, and gradient fill

Animated counting component with easing animation and formatting

Split hero with text left and visual right, gradient background with trust badges

Bento grid layout for features with gradient borders and hover effects

Four stats cards with gradient text and decorative borders

Premium product card with image, color swatches, star rating, price, wishlist heart, and add to cart button

Order tracking card with 4-step progress indicator and delivery details

Promotional banner with gradient background, coupon code, expiry countdown, and shop button

Chat message component with avatar, message bubble, timestamp, and read receipts. Supports sent/received variants with different alignment and colors.

Threaded comments with nested replies, avatar, name, time, like button, and reply button.

Notification list with icon, title, description, time, read/unread state, and action buttons.

Profile card with cover image area, avatar, name, bio, follower/following counts, and follow button.

Emoji reaction bar with most-used reactions, count badges, and add reaction button.

A 3-step form wizard with progress indicators, validation, and step navigation.

A search input with filter chips, recent searches, and keyboard shortcut hint.

A date range selector with preset ranges and custom date selection.

A drag-and-drop file upload area with progress tracking.

Password input with strength meter and requirement checklist.

6-digit OTP/verification code input with auto-focus and paste support.

Collapsible sidebar with icon-only collapsed mode, section headers, active states with blue highlight, and badge counts.

Tab navigation with animated underline indicator, badges showing counts, icon + label combos, and horizontal scroll for overflow.

Mobile bottom navigation bar with 5 items, active state with filled icon and colored dot, center FAB button elevated with plus icon.

Multi-column dropdown mega menu with Products, Resources, and Featured columns with cards and descriptions.

Floating command palette with search input, grouped sections, keyboard shortcut hints, and selected item highlight.

macOS-style dock bar with glass morphism background, hover scale animations, and tooltip labels.

Illustrated empty state with variants for no data, no results, and errors

Full success page with animated checkmark and confetti celebration

Vertical multi-stage progress tracker with tracking details

Dismissible banner alerts with icons, messages, and actions

Two-column upgrade card comparing Free and Pro plans

Bottom-fixed cookie consent banner with category toggles

Advanced table with sortable headers, alternating rows, and status badges

Kanban column with draggable-styled cards, count badge, and add button

Vertical timeline with alternating items, icons, dates, and connecting line

Expandable file tree with chevron toggles, indent guides, and icons

Feature comparison grid with check/x marks and category grouping

Key-value property display with labels, values, copy buttons, and badges

2x3 grid of varied stat cards with different internal layouts

Overlapping avatar group with overflow count and hover expansion

Weighted tag display with varying sizes based on frequency

Service status board with health indicators, uptime percentages, and response times

Sleek login card with email/password, show/hide toggle, remember me, social auth icons, and forgot password link.

3-step signup wizard: email/password, profile info, preferences, with animated progress dots.

Email-only magic link auth with "Check your inbox" state, envelope icon, and resend countdown timer.

2FA verification with 6-digit code input boxes, countdown timer, and backup code option.

Password reset flow: email input, confirmation sent, new password with strength meter.

Post-signup welcome screen with user greeting, 3 quick-start action cards, and skip tour option.

Account type picker with icon cards for Developer, Designer, Team Lead with descriptions and selection state.

Team invite form with email input, role selector dropdown, pending invites list with status badges.

Enterprise SSO login with company email domain detection and "Continue with SSO" flow.

Multi-account dropdown with avatar, name, email, active indicator, and "Add account" button.

Magazine-style bento grid layout with varied card sizes, subtle hover scale effects, and gradient accents.

Glassmorphism card with backdrop-blur, semi-transparent background, gradient border, and floating elements.

Number counter that animates from 0 to target value using requestAnimationFrame with easing.

Text with animated gradient using CSS background-clip with customizable color stops and animation speed.

Card with a radial gradient spotlight that follows mouse position using CSS custom properties.

Terminal-style component with green phosphor text, blinking cursor, scan lines, and typed output effect.

Card with CSS 3D transform giving isometric perspective on hover with smooth transitions.

Button with neon glow effect using box-shadow, pulse animation, and hover intensify.

Card that smoothly morphs between collapsed and expanded states with CSS transitions on click.

Badge with rainbow holographic shimmer effect using animated CSS gradients and transforms.

Three testimonial cards with avatars, star ratings, and quotes

Horizontal row of company names with separator dots

Full-width gradient CTA banner with decorative elements

Pricing section with monthly/annual toggle and three pricing tiers

Email signup section with input and success variant

Comparison table showing features between Us and Others

Combined section with avatar stack, customer count, and rating stats

Shopping cart summary with items, quantities, subtotal, and checkout button

Two-column checkout layout with shipping form and order summary

Modal-style product card with color selection, size options, and quantity

2x3 grid of category cards with gradient backgrounds and item counts

Vertical filter panel with brand checkboxes, size options, color dots, and price range

Customer review card with avatar, rating, review text, and helpful buttons

Wishlist item cards with product details, stock status, and action buttons

Rich message input with attachment button, emoji trigger, send button, and character count.

Mention/tag suggestion dropdown with avatar, name, handle, and online status indicator.

Share component with social platform icons, copy link button, and QR code placeholder area.

Social post card with user info, text content, image grid placeholder, and like/comment/share action bar.

Online users sidebar with avatar, name, status dot, grouped by status.

Click-to-edit fields that transform from text to input on click.

An input that creates tag badges on Enter press with remove functionality.

Smart address form with country select and conditional state/province fields.

Interactive star rating with hover preview and selection.

Smart breadcrumb with dropdown for middle items when path is long, using ChevronRight separator and Home icon.

Horizontal step progression with completed (green check), current (blue ring), and upcoming (gray) states with connector lines.

Full pagination with page numbers, ellipsis, prev/next arrows, per-page select dropdown, and results text.

Right-click context menu demo area with icons, keyboard shortcut labels, separators, and nested Share submenu.

Skeleton screen for dashboard card layout with chart, stats, and table

Branded 404 error page with search input and helpful actions

Stacked toast notifications with different variants and actions

Full-page maintenance screen with animated gear and status