UI Snippets
A growing library of advanced, hand-built UI components — forms, sliders, loaders, navigation and more. Some are pure vanilla HTML/CSS/JS; others build on Bootstrap 5. Every one has a live preview, full source to copy, and a one-click download.
Multi-Step Form Wizard
A three-step form with a progress bar, per-step validation, a review summary and an animated success state.
Dual Range Slider with Histogram
A two-handle price slider with a live histogram that highlights the selected range — like the filters on travel and shopping sites.
Auto-Playing Carousel
A slide carousel with autoplay, SVG arrows, dot navigation, keyboard arrows, swipe gestures and pause-on-hover.
Before / After Comparison
A draggable divider that wipes between two images to compare them — works with mouse and touch.
Animated Circular Progress
An SVG progress ring with a gradient stroke that animates its arc while easing the percentage count up.
Stateful Loading Button
A submit button that morphs through idle, spinner and success states with a clean SVG tick.
Drag-to-Reorder List
A sortable to-do list whose items can be dragged into a new order, with an SVG grip handle and smooth drop feedback.
Tabs with Sliding Indicator
A tab bar with a pill indicator that glides to the active tab and cross-fades the panels.
Smooth Animated Accordion
An FAQ accordion that animates open and closed by measuring height, with a rotating SVG chevron.
Command Palette (⌘K)
A Spotlight-style command palette opened with ⌘K / Ctrl+K, with live filtering and full keyboard navigation.
Animated Sidebar Drawer
A hamburger that morphs into a close icon and slides in a sidebar drawer with a dimmed scrim.
Animated Stat Counters
Number counters that ease up to their value when they scroll into view, with prefix/suffix support.
Stacking Toast Notifications
Toasts that stack with colour-coded SVG icons, an auto-dismiss progress bar and manual close.
Half-Star Rating
An SVG star rating that supports half values on hover and click, with a live readout.
OTP / Verification Code Input
A 6-box one-time-code input with auto-advance, backspace navigation and full paste support.
Tag / Chips Input
An input that turns typed words into removable chips on Enter or comma, with backspace-to-delete.
File Dropzone with Progress
A drag-and-drop file dropzone that lists dropped files and animates a per-file upload progress bar.
Animated Dark-Mode Toggle
A sun/moon theme switch with a sliding knob that smoothly transitions the surrounding surface.
Password Strength Meter
A live password strength meter with a colour-coded bar, label and a checklist of requirements.
Advanced
Advanced
Intermediate
Intermediate
Intermediate
Intermediate
Beginner
Beginner
Beginner
Beginner
Code Block with Copy
A syntax-styled code block with a window chrome header and a one-click copy button that confirms.
3D Parallax Tilt Card
A card that tilts in 3D toward the cursor with a moving glare highlight — pure CSS transforms and JS.
Animated Quantity Stepper
A plus/minus quantity selector with an animated number roll and tactile button presses.
Segmented Control
An iOS-style segmented control with a sliding gradient pill and a live output of the selection.
Skeleton → Content Loader
A card that shimmers as a skeleton placeholder, then resolves into real content — re-runnable.
Reading Scroll Progress
A reading-progress bar that fills as you scroll through a content container — ideal for articles.
Typewriter Text Effect
An animated typewriter effect that types and deletes rotating phrases, powered by Typed.js.
Confetti Celebration Button
A button that bursts colourful confetti from multiple angles, using canvas-confetti.
GSAP Stagger Animation
Boxes that drop in with rotation and elastic easing in a staggered sequence, powered by GSAP.
Animate On Scroll Cards
Cards that fade, zoom and flip into view as they enter the viewport, using the AOS library.
Tooltips with Tippy.js
Polished, positioned tooltips with hover and click triggers, powered by Tippy.js and Popper.
Animate.css Effects Grid
A grid of buttons that trigger classic Animate.css effects — bounce, shake, rubber band and more.
Chart.js Line Chart
A smooth, filled line chart with gradient points showing weekly visitors, powered by Chart.js.
Chart.js Gradient Bar Chart
A rounded bar chart with a vertical gradient fill for quarterly revenue, powered by Chart.js.
Chart.js Doughnut Chart
A clean doughnut chart breaking down traffic by device, powered by Chart.js.
Chart.js Radar Comparison
A two-series radar chart comparing products across six dimensions, powered by Chart.js.
Swiper Coverflow Slider
A 3D coverflow carousel with depth, rotation and clickable pagination, powered by Swiper.
Kanban Board (SortableJS)
A multi-column kanban board where cards drag between columns with smooth animation, using SortableJS.
Animated Gradient Border
A card wrapped in a rotating conic-gradient border — pure CSS, no images.
Magnetic Button
A button that is magnetically attracted to the cursor, with a parallax label.
Text Scramble Effect
Text that decodes from random characters into the final word — a hacker-style reveal.
Countdown Timer
A live hours/minutes/seconds countdown with tabular figures — ideal for launches and sales.
Monthly / Yearly Pricing Toggle
A billing toggle that switches the displayed price between monthly and yearly with a discount badge.
Scroll-to-Top Button
A floating button that appears after scrolling and smoothly returns to the top.
Order Status Timeline
A vertical timeline with completed and pending steps — great for order tracking.
Overlapping Avatar Stack
An overlapping avatar group with a hover lift and an overflow counter.
Cursor-Tracking Glow Card
A dark card with a radial glow that follows the cursor across its surface.
Animated Success Checkmark
A button that reveals an SVG success checkmark drawing itself in on click.
Color Picker with HEX/RGB
A native color input that live-previews the swatch and shows HEX and RGB values.
Copy Link Field
A read-only link field with a one-click copy button that confirms — perfect for share URLs.
Range Slider with Tooltip
A range slider with a value bubble that follows the thumb as it moves.
Animated Notification Badge
A bell with a count badge that pops when incremented and hides at zero.
Image Hover Zoom
An image that magnifies toward the cursor on hover — like product zoom on shops.
Neumorphic Toggle
A soft neumorphic (soft-UI) toggle switch with inset shadows and a gradient on state.
Progress Step Indicator
A numbered step indicator with a filling connector line that advances on click.
Infinite Marquee Ticker
A smooth, seamless scrolling marquee with edge fade — modern, not the old <marquee> tag.
Flip Number Display
A three-digit number display with sliding digits — a retro split-flap feel.
Toast Position Picker
A grid that fires a toast in any of six screen positions — handy for testing placements.
Click Ripple Card
A card that emits a material-style ripple from wherever you click on it.
Lucide Icon Grid
A responsive grid of crisp Lucide icons with hover lift — a clean, modern icon set via CDN.
CountUp.js Stat Counters
Animated stat counters with separators, decimals and prefixes/suffixes, powered by CountUp.js.
Morphing Blob
A gradient blob that endlessly morphs its border-radius and rotates — a trendy organic shape.
Liquid Fill Progress
A circular gauge filling with an animated liquid wave clipped inside an SVG circle.
Rotating 3D Cube
A six-faced 3D cube rotating on two axes using CSS transforms and preserve-3d.
Wave Text Animation
Heading letters that bob up and down in sequence like a wave, with a gradient fill.
Animated Mesh Gradient
A multi-point mesh gradient that slowly drifts — a modern hero background.
Glitch Text Effect
RGB-split glitch text with two offset color layers jittering — a cyberpunk look.
Pulsing Glow Orb
A glowing orb that breathes with a pulsing scale and shadow — great as a status or AI indicator.
SVG Line Draw Animation
A path that draws itself in with a gradient stroke — replayable on click.
Floating Shapes Backdrop
Soft shapes that float and rotate behind a card — a lively decorative backdrop.
Cursor Particle Trail
Colorful particles that spawn and float up from the cursor as it moves across the area.
Like Button with Burst
A heart like-button that fills, beats and bursts particles on click — a satisfying micro-interaction.
Expanding FAB Menu
A floating action button that rotates and fans out staggered action buttons on click.
Expanding Search Bar
A search icon that expands into a full input field with a smooth width transition.
Flipping Credit Card
A 3D credit card that flips to reveal the CVV on the back — a checkout-form favourite.
Shimmer List Loader
A list placeholder with shimmering avatar and text rows — the classic content-loading state.
Animated Toggle Group
A view-switcher with an indicator that slides between options — clean and tactile.
Slide-In Notification
A notification that slides down from the top with an auto-dismiss progress bar.
Conic Progress Rings
A row of conic-gradient progress rings that fill and count up to their values.
Emoji Reaction Rating
An emoji satisfaction rating where faces grow and colour on hover, with a live label.
Chat Typing Indicator
A chat thread with animated typing dots — the familiar "someone is typing" bubble.
Stacking Toast Queue
Toasts that slide in, stack and auto-dismiss in sequence as you add them.
Hover Reveal Card
A card that lifts on hover and reveals a description and call-to-action with a smooth expand.
Gooey Metaball Blobs
Blobs that merge and separate with a gooey metaball effect via CSS contrast filtering.
Download Progress Button
A button that fills with a progress bar on click, then confirms completion.
Shrinking Sticky Header
A sticky header that shrinks and gains a shadow once the user scrolls past the top.
Day / Night Switch
A sun-to-moon toggle that reveals stars and flips the whole background between day and night.
Countdown Ring Timer
A circular SVG ring that depletes second by second with a counting number — a session timer.
Cursor-Follow Tooltip
A tooltip that follows the cursor exactly as it moves across an area — a custom pointer label.
Vertical Wizard Accordion
A single-open vertical stepper where each step expands smoothly to reveal its content.
Odometer Number Roll
A mechanical odometer where each digit column rolls vertically to the new number.
Glassmorphism Card
A frosted glass card with backdrop blur, gradient backdrop and inner highlight — the iconic glass look.
Claymorphism Buttons
Soft, puffy 3D clay-style elements with layered inner and outer shadows — a playful trend.
Bento Grid Layout
A modern bento-box dashboard grid with mixed tile sizes — the layout trend everywhere right now.
Aurora Gradient Background
Soft blurred color blobs drifting like an aurora behind text — a popular hero backdrop.
Spotlight Hover Cards
Dark feature cards with a radial spotlight that follows the cursor — popular on SaaS landing pages.
Neon Cyberpunk Buttons
Glowing outlined neon buttons that flood with color on hover — a retro-futuristic favourite.
Animated Terminal Window
A macOS-style terminal that types out commands and output with a blinking cursor.
Film Grain Overlay
An animated SVG noise/grain texture over a gradient — adds a cinematic, tactile feel.
Frosted Glass Navbar
A floating navbar with a frosted-glass blur over a colorful background — modern site header.
Animated Border Button
A button wrapped in a rotating conic-gradient border that glows on hover — a CTA that pops.
Scroll-Snap Gallery
A horizontal gallery that snaps cleanly to each panel as you scroll — no JS needed.
Sticky Stacking Cards
Cards that stick and stack on top of each other as you scroll — a trendy scrollytelling effect.
Logo Wall Marquee
An infinitely scrolling brand/logo strip with edge fade — the "trusted by" band on landing pages.
Expanding Panel Gallery
Panels that expand to fill the row on hover, pushing the others aside — an accordion-style gallery.
Dark Pro Pricing Card
A premium dark pricing card with a popular badge, feature list and gradient CTA.
Auto Testimonial Slider
An auto-advancing testimonial carousel with dot navigation — social proof for landing pages.
Animated Stat Cards
A column of metric cards with icons whose numbers count up on load — a mini dashboard.
FAQ Accordion with Plus Icon
A single-open FAQ accordion where a plus morphs into a minus — clean and familiar.
Plan Comparison Table
A dark free-vs-pro comparison with check and cross marks and a highlighted Pro column.
Bootstrap Hero Section
A centered hero with a pill badge, headline, subtext and dual call-to-action buttons.
Bootstrap Feature Cards
A responsive three-column feature row with icon cards, built on the Bootstrap grid.
Bootstrap Stats Row
A clean three-stat metrics row using Bootstrap display headings and grid columns.
Bootstrap Testimonial Card
A centered testimonial card with star rating and an avatar, built with Bootstrap utilities.
Bootstrap Alert Stack
A stack of success, warning and danger alerts with leading icons, using Bootstrap alerts.
Bootstrap Progress Bars
Labeled, color-coded progress bars for usage metrics, using the Bootstrap progress component.
Shimmer Shine Text
A heading with a light shine sweeping across it on a loop — a subtle premium touch.
Mobile Hamburger Menu
A compact navbar whose hamburger morphs to an X and drops a fading menu — mobile-first nav.
3D Book Cover
A 3D book cover with a spine that straightens to face you on hover — great for product/ebook pages.
Social Share Dock
A share button that rotates and fans out social icons with a staggered reveal on hover.
Holographic Tilt Card
A holographic card that tilts in 3D and shifts its rainbow gradient and glare toward the cursor.
Profile Card with Stats
A user profile card with a gradient cover, avatar, follower stats and a follow button.
Team Member Grid
A responsive team grid of avatar cards with names and roles.
Contact Card
A contact card with avatar, details and message/call action buttons.
Author Bio Box
An author bio box with avatar, description and topic tags — for blogs and articles.
Member Stats Card
A membership card with a badge icon and a three-column stats footer.
User List with Status
A list-group of users with avatars, status text and unread badges.
Follow Card Toggle
A compact follow card whose button toggles between Follow and Following.
Social Profile Card
A profile card with round social media link buttons.
Employee Status Card
An employee card with an online status dot and an active badge.
Review Card
A customer review card with avatar, star rating and quote.
Login Form Card
A clean sign-in card with email, password, remember-me and forgot-password link.
Sign-up Form Card
A registration card with split name fields, email, password and terms checkbox.
Contact Form Card
A contact form with name, email, subject and message in a tidy card.
Search Bar with Tags
A large input-group search bar with popular search tags below.
Newsletter Signup
A centered newsletter opt-in card with an inline email input and button.
Three-Tier Pricing
A three-column pricing table with a highlighted recommended plan.
OTP Verification Form
A six-box verification code form for email or 2FA confirmation.
Settings Switch List
A settings card with labeled toggle switches for notifications.
Budget Range Slider
A range-slider card with a live value readout and min/max labels.
Floating Label Form
A form card using Bootstrap floating labels for inputs and a select.
KPI Stat Widgets
A row of four KPI cards with values and up/down trend indicators.
Project Progress Card
A card with labeled, color-coded progress bars for project phases.
Activity Feed
A recent-activity feed with colored icon badges and timestamps.
Order Timeline
A vertical timeline showing order milestones with completed and pending dots.
To-Do Checklist
A task checklist card with checkboxes and strike-through for completed items.
Kanban Column
A kanban board column with a count badge and labeled task cards.
File List
A file list with type icons, sizes and download buttons.
Notifications Panel
A notifications dropdown panel with icon badges and timestamps.
Calendar Day Badge
A tear-off style calendar date badge with month, day and weekday.
Mini Sparkline Card
A metric card with an inline SVG sparkline and a trend badge.
Product Card
An e-commerce product card with discount badge, rating, price and add-to-cart.
Cart Line Item
A shopping cart row with thumbnail, quantity stepper and line total.
Order Summary
A checkout order summary card with subtotal, shipping, tax and total.
Blog Post Card
A blog post card with cover, category tag, excerpt and author byline.
Category Tiles
A grid of clickable category tiles with icons.
Gradient CTA Banner
A gradient call-to-action banner with text and a button.
Feature Checklist
A plan feature list with included checks and excluded crosses.
FAQ Accordion
A frequently-asked-questions accordion using the Bootstrap collapse component.
Image Overlay Card
A media card with a gradient overlay, badge and caption at the bottom.
Checkout Steps
A horizontal checkout step indicator with completed and upcoming states.
Split-Screen Login
A two-panel login with a gradient welcome side and a sign-in form side.
Social Login Card
A login card with social provider buttons and an email fallback.
Password Reset Card
A forgot-password card that requests an email for a reset link.
Two-Factor Auth Card
A 2FA code entry card with a large spaced code input.
Lock Screen
A locked-session screen with the user avatar and a password unlock.
Welcome Onboarding
A first-run welcome card with step dots and a get-started button.
Plan Selection Cards
Selectable radio plan cards with a highlighted recommended option.
Email Verified Card
A success card confirming an email was verified, with a continue button.
Profile Setup Card
A profile setup card with an avatar uploader and name fields.
Maintenance Screen
A maintenance-mode screen with an animated progress bar and ETA.
Admin Sidebar Layout
An admin layout with a dark sidebar nav and a light content area.
Admin Top Bar
A dashboard top bar with menu toggle, search, notifications and avatar.
Data Table with Badges
A hoverable user data table with avatars, roles and status badges.
User Management Row
A user management row with role select and an actions menu.
Billing Card
A billing summary card with the saved card, plan and next charge.
Invoice Card
An invoice card with line items, paid badge and total.
Analytics Bar Card
A traffic analytics card with a CSS bar chart and range selector.
System Status Card
A service status card with operational and degraded badges.
Audit Log Card
An audit log card listing timestamped admin actions.
Account Settings Panel
An account settings panel with text, select, switch and save actions.
Hero with Image
A split hero with headline, CTAs and a gradient image panel.
Feature Split Section
An image-and-text feature section with a checklist.
Stats Band
A dark gradient stats band with four key metrics.
Gradient CTA Section
A centered gradient call-to-action section with dual buttons.
Logo Cloud
A "trusted by" logo cloud band with a label.
Multi-Column Footer
A dark multi-column site footer with link groups and copyright.
Testimonial Grid
A two-column testimonial grid with star ratings and avatars.
Newsletter Band
A horizontal newsletter sign-up band with inline input.
Pricing with Toggle
A pricing card with a monthly/yearly billing toggle group.
Centered Section Heading
A centered section heading with a pill badge and subtext.
Empty State Card
An empty-state card with an icon, message and a primary action.
404 Error Block
A 404 not-found block with a big code, message and action buttons.
Multi-Step Form Wizard
A multi-step form with a numbered stepper and back/next controls.
Tabbed Content Card
A card with Bootstrap nav-tabs switching between content panes.
Breadcrumb Page Header
A page header with breadcrumbs, a title and an edit button.
Alert Variants
A set of info, success, warning and danger alerts with icons.
Badge Style Collection
A showcase of solid, pill and subtle badge styles.
Button Showcase
A collection of button variants, pills and a button group.
Cookie Consent Card
A cookie consent card with decline and accept-all buttons.
Upload Progress Card
An upload progress card with a bar, count and spinner.
Chat Conversation UI
A chat window with header, message bubbles and an input footer.
Comment Thread
A comment thread with avatars, nested reply and a comment box.
Weather Card
A gradient weather card with current temp and a 4-day forecast.
Music Player Card
A music player card with artwork, progress bar and transport controls.
Video Thumbnail Card
A video card with a play overlay, duration badge and metadata.
Settings with Side Tabs
A settings layout with a vertical tab list and a form panel.
Feature Comparison Table
A free-vs-pro feature comparison table with a highlighted column.
Icon Feature Grid
A responsive feature grid with colored icon tiles and captions.
App Download Band
A dark band promoting mobile app downloads with store buttons.
Feature Notification Card
A left-accent notification card with an action and dismiss link.
Live Character Counter
A textarea with a live character counter that warns near the limit.
Password Strength Meter
A password field with a live Bootstrap progress-bar strength meter.
Tag Input Field
A tag input that turns typed words into removable Bootstrap badges.
Live Email Validation
An email field with JS validation toggling Bootstrap valid/invalid states.
Range with Live Output
A range slider whose value updates a Bootstrap badge live.
Password Visibility Toggle
A password input with a button that toggles visibility.
Copy-to-Clipboard Field
A read-only field with a copy button that confirms on click.
Autosave Indicator
A textarea showing a saving → saved status as you type.
Dependent Select Boxes
A country select that populates a dependent city select via JS.
Phone Input Formatter
An input that live-formats digits into a phone number pattern.
Live Search Filter
A list filtered live as you type, with a results counter.
Interactive Star Rating
A 5-star rating with hover preview and click-to-set.
Quantity Stepper with Total
A plus/minus quantity input that recalculates a live total.
Sortable Table
A table with clickable headers that sort rows by text or number.
Countdown Timer
A live HH:MM:SS countdown in styled time blocks.
Category Filter Buttons
A button group that filters a grid of items by category.
Show/Hide Toggle
A button that expands and collapses a details panel with an arrow.
Animated Progress Bar
A progress bar that animates from 0 to 100% on button click.
Copy with Toast
A copy button that triggers a real Bootstrap toast on success.
Confirm Action Modal
A delete button that opens a Bootstrap confirmation modal.
Animated Stat Counters
Stat numbers that count up with easing on button click.
Live Clock Card
A live ticking clock with date, updated every second.
To-Do Add & Remove
A to-do list where you add and remove items dynamically.
Card Theme Switcher
A button that toggles a card between light and dark themes.
Dismissible Alerts
Stacked alerts that fade out and remove when dismissed.
SVG Progress Ring
An SVG ring that animates to a percentage on click.
Tab Content Switcher
A button-group tab switcher that swaps content panes.
Live Visitor Counter
A live-updating visitor count that fluctuates over time.
Custom Image Carousel
A custom carousel with prev/next and clickable dot indicators.
Live Color Picker
A color input that live-updates a swatch and shows the HEX value.
Custom FAQ Accordion
A single-open FAQ accordion with plus/minus toggles in pure JS.
Multi-Step Form
A multi-step form with a progress bar and next/back navigation.
Dual Range Price Filter
Two range sliders forming a min–max price filter with live output.
Like & Save Buttons
Like and save buttons with live count and toggle states.
Scroll-Spy Side Nav
A side nav that highlights the active section as you scroll.
Inline Edit Field
A profile value with an inline edit-and-save interaction.
Vertical Progress Stepper
A vertical stepper that advances status on button click.
Yes/No Feedback
Helpful yes/no feedback buttons that lock in a thank-you message.
Toast Trigger Buttons
Buttons that fire colored Bootstrap toasts via the Toast API.
Offcanvas Side Menu
A button that opens a Bootstrap offcanvas slide-in menu.
OTP Auto-Advance Input
A 4-box code input that auto-advances and supports backspace.
Typeahead Autocomplete
A search input with a live autocomplete dropdown of matches.
Drag-to-Reorder List
A list whose items can be dragged to reorder, using native drag events.
Calculator Widget
A working calculator with a button grid and live expression display.
Animated Underline Tabs
Tabs with a sliding underline indicator that swaps content.
Load More List
A list that appends more items on click until the limit.
Notification Bell Dropdown
A bell with a badge and a dropdown that clears the count.
Temperature Toggle
A small weather card toggling between Celsius and Fahrenheit.
Popover & Tooltip Demo
Buttons demonstrating Bootstrap popovers and tooltips via the API.
Loading Spinner Button
A submit button that shows a spinner and disables while loading.
Paginated Data Table
A data table with client-side pagination and prev/next controls.
Multi-Select Dropdown
A checkbox dropdown that summarizes selections as badges.
Calendar Date Picker
A month calendar with navigation and click-to-select a date.
Collapsible Tree View
A nested file tree with expandable and collapsible folders.
Expandable Table Rows
Table rows that expand to reveal detail rows on click.
Toggle Table Columns
Checkboxes that show or hide individual table columns.
Tag Filter List
Tag buttons that filter a list of items by category.
Searchable Table
A table filtered live as you type, with a row counter.
Animated Stat Grid
A grid of metric cards whose values count up on load.
Cart with Live Total
A mini cart where quantity changes recalculate the grand total.
Image Lightbox Gallery
A thumbnail gallery that opens images in a Bootstrap modal lightbox.
Before/After Slider
A draggable divider revealing a before/after image comparison.
Code Block with Copy
A dark code block with a header and a working copy button.
Rating Breakdown
An average rating with a per-star distribution of progress bars.
Live Profile Preview
Form inputs that live-update a profile card preview with initials.
Validated Step Wizard
A nav-pills wizard that validates the email step before advancing.
Drag & Drop Upload
A drop zone that lists dropped files with name and size.
Pill Tabs Switcher
Nav-pill tabs that swap the content panel below.
Toast Position Grid
A 6-position grid that fires a toast in any screen corner.
Loading Overlay
A card with a button that shows a full-card loading spinner overlay.
Pricing Monthly/Yearly Toggle
A pricing pair whose prices switch between monthly and yearly.
Profile Completion Meter
A checklist that updates a completion percentage bar as you check items.
Animated Skill Bars
Skill progress bars that animate to their values on click.
Notification Center
A notification list where items dismiss and show an empty state.
Searchable FAQ
An FAQ list filtered live by a search box with a no-results state.
Interactive Checklist
A launch checklist where clicking a row marks it complete.
Plus/Minus Accordion
A custom accordion with plus/minus toggles, multiple open allowed.
Auto Testimonial Slider
A self-advancing testimonial slider with dot navigation.
Stat Comparison Card
A dual-metric card with up/down comparisons and a goal bar.
Upvote/Downvote Widget
A vote widget with up/down arrows and a live score.
Inline Form Validation
A form with live field validation that enables submit when valid.
Currency Input Formatter
A currency input that formats the amount and shows a preview.
Toggle Button Group
A multi-select button group that summarizes the chosen options.
Stepped Range Slider
A stepped range slider with labeled stops and a live badge.
OTP with Resend Timer
A verify form with a resend button that counts down before re-enabling.
Image Upload Preview
A file input that previews the selected image instantly.
Password Match Check
Two password fields that validate they match live.
Character Ring Counter
A textarea with a circular remaining-character ring counter.
Range with Live Preview
A range slider that live-adjusts a preview swatch.
Order Quantity Grid
A grid of products with steppers and a live order total.
Support Chat Widget
A launcher button that opens a chat panel with auto-replies.
Condensing Scroll Header
A sticky header that shrinks and adds a shadow on scroll.
Reading Progress Bar
A top progress bar that fills as the article is scrolled.
Back-to-Top Button
A floating button that appears on scroll and returns to the top.
Theme Toggle Switch
A switch that flips a card between light and dark themes.
JSON Formatter
A mini JSON formatter that pretty-prints or reports errors.
Product Info Tabs
Tabbed product info switching specs, reviews and shipping.
Flash Sale Countdown Bar
A depleting striped progress bar simulating a flash-sale timer.
Hover Star Rating Input
A star rating with hover preview, selection and a label.
Copy Link & Share
A share row with a copy-link field and social buttons.
ApexCharts Area Chart
A smooth gradient area chart of weekly revenue, powered by ApexCharts.
ApexCharts Donut Chart
A donut chart of traffic sources with a bottom legend, via ApexCharts.
ApexCharts Radial Gauges
Multi-series radial bar gauges with a total label, via ApexCharts.
ApexCharts Grouped Bars
Grouped sales-vs-target bars with rounded columns, via ApexCharts.
Sparkline Stat Cards
Metric cards each with an inline sparkline chart, via ApexCharts.
ApexCharts Heatmap
An activity heatmap grid of weekly intensity, via ApexCharts.
Flatpickr Date Input
A clean date-picker input powered by Flatpickr.
Flatpickr Date Range
A date-range picker selecting a start and end date, via Flatpickr.
Choices Multi-Select
A removable-tag multi-select powered by Choices.js.
Choices Searchable Select
A searchable single select dropdown, via Choices.js.
Credit Card Input Mask
A credit-card number input auto-formatted in groups, via Cleave.js.
Expiry & CVC Mask
Expiry (MM/YY) and CVC inputs with masks, via Cleave.js.
Splide Autoplay Carousel
An autoplaying looped carousel with arrows and pagination, via Splide.
Splide Thumbnail Gallery
A main slider synced to a thumbnail strip, via Splide.
SweetAlert2 Dialogs
Success and confirm-delete dialogs powered by SweetAlert2.
SweetAlert2 Toast & Prompt
A corner toast and a text-input prompt, via SweetAlert2.
Live QR Code Generator
A QR code that regenerates live as you type a URL, via QRCode.js.
Live Markdown Editor
A split markdown editor with live HTML preview, via Marked.
Syntax-Highlighted Code
A code block with real syntax highlighting, via Prism.
Masonry Card Grid
A Pinterest-style masonry grid of varied-height cards, via Masonry.
Fuzzy Search List
A typo-tolerant fuzzy search over a list, via Fuse.js.
Signature Pad
A canvas you can draw a signature on, with clear, via Signature Pad.
3D Tilt Card
A card that tilts in 3D with a glare following the cursor, via Vanilla-Tilt.
Particle Network Background
An interactive connected-particle background, via particles.js.
FullCalendar Month View
A month-grid calendar with colored events, via FullCalendar.
FullCalendar Agenda List
A weekly agenda list view of events, via FullCalendar.
ApexCharts Multi-Line
A two-series smooth line chart comparing years, via ApexCharts.
ApexCharts Skill Radar
A radar chart of skill levels across categories, via ApexCharts.
ApexCharts Candlestick
A financial candlestick chart, via ApexCharts.
ApexCharts Polar Area
A polar-area category chart, via ApexCharts.
GSAP Hero Reveal
A hero whose elements stagger-fade in on load, via GSAP.
GSAP Count-Up
A number that counts up with eased motion, via GSAP.
Tippy Rich Tooltips
Plain and HTML-rich animated tooltips, via Tippy.js.
AOS Scroll Steps
Step cards that slide in on scroll, via AOS.
Confetti Success Card
A success card that bursts confetti, via canvas-confetti.
Typed.js Headline
A rotating typewriter headline, via Typed.js.
Splide Multi-Card Slider
A responsive slider showing multiple cards per page, via Splide.
SweetAlert Step Wizard
A chained multi-step input flow, via SweetAlert2.
SweetAlert Image & Error
An image-reward dialog and a detailed error dialog, via SweetAlert2.
Flatpickr Time Picker
A 24-hour time-only picker, via Flatpickr.
Choices Tag Entry
A free-text tag input with removable chips, via Choices.js.
Phone Number Mask
A phone input formatted to (xxx) xxx-xxxx, via Cleave.js.
QR Connect Card
A styled card with a scannable QR code, via QRCode.js.
Markdown Notes Card
A notes card toggling between edit and rendered preview, via Marked.
Highlighted CSS Block
A CSS code block with syntax highlighting, via Prism.
Masonry Photo Gallery
A 3-column masonry photo gallery of varied heights, via Masonry.
3D Tilt Card Grid
A grid of cards that tilt with glare on hover, via Vanilla-Tilt.
Command Palette Search
A command palette with fuzzy-matched actions, via Fuse.js.
Chart.js Bar + Line
A combined bar-and-line chart of sales and profit, via Chart.js.
Chart.js Storage Doughnut
A doughnut chart of storage usage, via Chart.js.
Chart.js Polar Area
A polar-area skill chart, via Chart.js.
Chart.js Stacked Bars
A stacked bar chart of channel breakdown, via Chart.js.
Chart.js Team Radar
A two-team radar comparison chart, via Chart.js.
Swiper Fade Slider
A crossfading autoplay slider with pagination, via Swiper.
Swiper 3D Cube
A rotating 3D cube slider with shadows, via Swiper.
Swiper Cards Stack
A swipeable stacked-cards effect, via Swiper.
Sortable Drag List
A drag-to-reorder task list, via SortableJS.
Sortable Kanban Board
A three-column kanban where cards drag between columns, via SortableJS.
Lucide Icon Cards
Feature cards using crisp Lucide icons.
AOS Reveal Gallery
A gallery whose tiles zoom in on scroll, via AOS.
Mini Dashboard Card
A dashboard card with count-up KPIs and an area chart, via ApexCharts.
Booking Form Combo
A booking form combining Flatpickr, Choices and a SweetAlert confirm.
QR Ticket Card
A ticket card with a QR code and an add-to-wallet toast.
GSAP Card Grid Reveal
Cards that pop in with back-easing stagger, via GSAP.
KPI Card with Tooltip
A KPI card with an info tooltip and a mini bar chart.
Splide Testimonial Loop
An auto-looping testimonial slider, via Splide.
Checkout Payment Combo
A masked payment form with a SweetAlert success, via Cleave + SweetAlert2.
Tilting Masonry Portfolio
A masonry portfolio whose tiles tilt on hover, via Masonry + Vanilla-Tilt.
Docs Block (MD + Code)
Rendered markdown docs with highlighted code, via Marked + Prism.
Login on Particle BG
A sign-in card over an animated particle network, via particles.js.
CountUp Metric Cards
Metric cards that count up to their values, via CountUp.js.
AOS Reveal Timeline
A vertical timeline whose items slide in on scroll, via AOS.
Analytics with Range Switch
A bar chart whose data updates when the date range changes, via ApexCharts.
Chat with Markdown
A chat UI that renders markdown in messages, via Marked.
Invoice with Donut
An invoice card with a cost-breakdown donut, via ApexCharts.
NPS Survey Scale
An 11-point NPS survey scale with contextual feedback.
Usage Credit Gauge
A radial usage gauge with a credits label, via ApexCharts.
Pomodoro Focus Timer
A start/pause/reset focus countdown timer.
Searchable File Manager
A file list filtered live by a search box.
Order Checkout Wizard
A multi-step order flow with a masked card field, via Cleave.
System Resource Gauges
Three radial gauges for CPU, RAM and disk, via ApexCharts.
Contribution Heatmap
A GitHub-style contribution heatmap, via ApexCharts.
Kanban with Live Counts
A kanban board whose column counts update as cards move, via SortableJS.
Review Distribution Bars
A horizontal bar chart of star-rating distribution, via ApexCharts.
Product Card with Slider
A product card with an image slider and add-to-cart toast.
Slide-In Cart Drawer
An offcanvas cart drawer with checkout and a success alert.
Product Color Swatches
Color swatch buttons that update a large preview and label.
Size Picker
A size selector with a disabled out-of-stock option and add button.
Price Range Filter
A dual-slider price filter with live min/max output.
Plan Comparison Chart
A grouped bar chart comparing plan features, via ApexCharts.
Wishlist Heart Toggle
A product row with a heart that toggles wishlist state.
Limited Stock Bar
A scarcity bar that decreases stock with each purchase click.
Star Review Form
A review form with a hover star rating and a submit alert.
Coupon Code Field
A promo-code field that validates a code and shows feedback.
Bundle Builder
A checkbox bundle whose total recalculates as items toggle.
Flash Deal with CountUp
A deal card with an animated savings count-up, via CountUp.js.
Signature Pad with Save
A signature canvas that exports the drawing as a PNG, via Signature Pad.
Switchable Chart Type
One chart that switches between line, bar and area, via ApexCharts.
Chart with Date Filter
A sales area chart paired with a Flatpickr date-range filter.
Skills Select + Gauge
A multi-select of skills with a radial match gauge, via Choices + ApexCharts.
Radial Progress Wizard
A step wizard whose radial gauge fills with each step, via ApexCharts.
Sparkline KPI Grid
A four-card KPI grid with mixed sparkline charts, via ApexCharts.
JSON Pretty + Highlight
A JSON input that pretty-prints and syntax-highlights, via Prism.
Goal Reached Confetti
A reward card with a confetti cannon burst, via canvas-confetti.
GSAP Animated Stat
A gradient stat card that counts up smoothly, via GSAP.
Tilting Chart Card
A 3D-tilting card containing a sparkline area chart.
Search with Typed Hints
A search bar with a rotating typed placeholder hint, via Typed.js.
Numeral Thousands Input
An amount input that adds thousand separators live, via Cleave.js.
Weather Card with Chart
A gradient weather card with a sparkline temperature trend, via ApexCharts.
Drag-Reorder Team List
A team member list reorderable by drag, via SortableJS.
Event Date Adder
Pick dates with Flatpickr and add them to a removable list.
Live Feature Voting
Vote buttons that update a live horizontal bar chart, via ApexCharts.
Mini Code Runner
A tiny JS playground that runs the snippet and shows the result.
Project Progress Radials
Three radial gauges for project phase progress, via ApexCharts.
Auto-Scrolling Gallery
A continuously auto-scrolling multi-image gallery, via Splide.
Tilting FAQ Card
A 3D-tilting card with an expandable FAQ accordion inside.
Budget Allocation Donut
A budget slider that live-splits a donut chart, via ApexCharts.
2FA QR Setup
A 2FA setup card with an otpauth QR and a confirm alert.
Sprint Burndown Chart
An ideal-vs-actual sprint burndown line chart, via ApexCharts.
Emoji Reaction Bar
A reaction bar where clicking an emoji bumps its count and pops confetti.
No snippets in this category yet.