CSS UI Components — Free Collections with Live Demos
UI components are the building blocks of every interface. This collection brings together the best free CSS UI components — hand-picked, live-demoed, and copy-paste ready. No frameworks, no dependencies you didn't ask for.
Buttons
8 collectionsLooking for animated or hover-effect buttons? See CSS Animated Buttons and CSS Button Hover Effects — they file under Motion because every demo centres on motion.
51 CSS Buttons
51 production CSS buttons with copy-paste code — submit and primary/secondary form buttons, ghost and outline variants, icon-only buttons with accessible tooltips, gradient CTAs, loading spinner buttons with state transitions, full disabled-state reference, segmented button groups, interactive state machines (add-to-cart, download progress, like heart, confirm delete, play/pause, subscribe confetti), click-effect studies (magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, editorial ink spread, particle shards), and material studies (brushed brass, washi paper, frosted ice, walnut lacquer, gel capsule, aged copper patina, holographic foil, IBM punch card, brass periscope). Every button scoped under .cb-NN, prefers-reduced-motion guarded, framework-agnostic — drop into React, Vue, Svelte, Astro, or plain HTML.
34 CSS Floating Buttons
34 hand-coded CSS floating action button (FAB) designs for SaaS admin dashboards, messaging chat widgets, e-commerce cart badges, and scroll-to-top navigation: Material Design 3 canonical FAB with ripple effect, iOS-style Compose floating button, WhatsApp floating message button, Intercom / Drift chat bubble, accessible WAI-ARIA reference (WCAG 2.2 AA aria-pressed + screen reader), Material Design 3 Extended FAB with icon and label, speed dial radial menu with backdrop, pure CSS FAB speed dial with zero JavaScript (checkbox-hack), Material gradient FAB, vertical and horizontal speed dial FAB menu, morphing FAB button that expands to pill, scroll-to-top floating button with SVG stroke-dashoffset progress ring, floating chat widget with notification panel, fan and arc radial spread menu, Apple squircle superellipse floating button, social share floating button cluster (X / Facebook / LinkedIn / WhatsApp / copy link), glassmorphism FAB with backdrop-filter blur, cyberpunk neon glow with scan-line overlay, floating compose button with hover tooltip, draggable FAB with corner snap and pointer events, notification bell with badge counter and interactive dropdown, floating cart with live badge counter and animated bump, magnetic cursor follower FAB with JS lerp easing, dark mode theme toggle with 4 style variants, classic gradient circle plus, pulse ring attention-getter, pill-shaped FAB with icon and text, neo-brutalist hard shadow, floating button with loading spinner state, draggable FAB with 6-dot grip handle, voice recording microphone with pulsing red halo, aurora gradient drift premium, quick emoji reply reaction picker, and modern squircle rounded square. 16 Pure CSS + 18 Light JS. Every design scoped under .fb-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Play / Pause Buttons
25 hand-coded CSS play / pause button designs for audio players, HTML5 video controls, podcast UIs, meditation apps, and media dashboards: pure CSS polygon clip-path morph (no JavaScript), custom HTML5 video overlay with backdrop-blur, glassmorphism audio player toggle, neumorphic soft-UI meditation control, Spotify-inspired circular play button with brand green oklch() palette, cyberpunk neon glow, WAI-ARIA accessible pattern (WCAG 2.2 AA reference with aria-pressed + screen reader), SVG path morphing triangle to double bar, vinyl record spinning audio control, equalizer soundwave animated toggle, media player track skip / fast-forward cluster, fluid liquid wave fill, pulsing halo video icon, iOS sliding pill audio toggle switch, retro arcade play pause, minimalist line-art outline, @property-typed conic gradient play button with rotating rim, voice note audio player, Material Design floating action button (FAB), podcast play button with SVG stroke-dashoffset progress ring, magnetic hover cursor follower, organic blob morph, Material ripple click state, vintage cassette tape audio control with spinning reels, and live-broadcast on-air badge. 16 Pure CSS + 9 Light JS. Every design scoped under .pp-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Button Groups
25 hand-coded CSS button groups: segmented controls, split buttons, pill radios, toggle groups, filter chips, floating action buttons, pricing toggles, Web3 wallet-connect grids, AI model pickers, icon toolbars — with Popover API, offset-path, View Transitions, @property, :has(), and every modern CSS primitive. Zero dependencies vs Radix/shadcn/Aceternity, WCAG 2.2 AA accessible, MIT licensed.
15 CSS Glowing Border Buttons
15 production-ready CSS glowing border buttons covering rotating gradient ring, neon pulse, animated border trace, cyberpunk clipped-corner, dark-mode form input focus glow, Tailwind blur-underneath recipe, glassmorphism frosted glow, minimalist e-commerce outer glow, breathing pulse SaaS pricing CTA, aria-pressed inner glow toggle, subtle docs button, SVG stroke trace, synthwave dual neon, hue-shift gradient border, and an accessible WCAG-ready focus glow. Every demo is scoped under .gbb-NN with prefers-reduced-motion guards and real semantic HTML.
28 CSS Close Buttons
28 hand-coded CSS close (X) buttons — pure CSS floating modal, WCAG focus-ring accessible, iOS-style tab close, chat window close, cookie consent dismiss, IAB mobile ad banner close, neumorphic soft shadow, hamburger-to-X morph, video player overlay close, native dialog drawer close, plus 18 aesthetic variants (magnetic cross, liquid pop, glitch, origami crease, particle burst, hold-to-confirm, toast dismiss, brutalist stamp, galaxy vortex, and more). Every button is a real semantic element with an accessible name, meets WCAG 2.5.8 target size, and gates motion behind prefers-reduced-motion.
22 CSS Gradient Buttons
22 production CSS gradient button designs covering the full spectrum plus eight unconventional interaction patterns — glow shadows, magnetic pull (cursor-attracting), a subtle inhale-exhale breathing button, gradient border and ghost fills, sliding sweeps, gradient text, shiny sheens, 3D-depth parallax with layered translateZ, neon glows, glassmorphism, futuristic oklch hue-cycling, pill shapes, search-bar combos, checkout CTAs, click-particle celebration trails, Tailwind-style palettes, press-and-hold conic charging ring, sliced shutter roll, gooey liquid pill, and cursor-tracking aurora. Every button scoped, prefers-reduced-motion guarded, copy-paste ready.
20 CSS Loading Buttons
20 hand-coded CSS loading buttons for checkout flows, dashboards, upload forms and any action that waits on a server. Covers the inline spinner swap, the width jump that makes a button shove its neighbours when the label changes, double-submit guarding with the disabled attribute rather than a class, the aria-busy and live-region contract screen readers need, minimum spinner duration so a fast response does not flicker, progress fill and percentage upload states, and the paths most builds skip entirely — retry after failure, optimistic save with rollback, server validation errors, and an undo window instead of a confirmation dialog.
Cards
9 collectionsLooking for hover-driven card effects? See CSS Card Hover Effects in Motion.
24 CSS Animated Cards
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS Glassmorphism Cards
25 hand-coded CSS glassmorphism card demos — each topic ships 2 side-by-side variants so you can pick the exact treatment for your surface. Covers glassmorphism credit cards, pricing tables, product cards with hover effects, checkout cards, crypto wallet balances, login and signup cards, user profile and team member cards, testimonial cards, dashboard analytics widgets, weather cards, music player cards, stat cards with progress bars, notification cards, blog post cards, feature showcase cards, service card grids, event ticket cards, portfolio item cards with hover, 3D tilt cards with vanilla JS, cards with animated glowing borders, dark mode glassmorphism cards for Tailwind, cards over video backgrounds, and gradient-border-blur cards. Every card uses the canonical backdrop-filter blur + saturate + subtle white border on translucent fill, with an @supports fallback for browsers without backdrop-filter. Modern @property, oklch(), light-dark(), color-mix() and container-query techniques throughout, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
15 CSS 3D Tilt Hover Cards
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
21 CSS Liquid Glass Cards
21 hand-coded CSS Liquid Glass cards inspired by Apple's WWDC 2025 design language (iOS 26 / macOS Tahoe / visionOS). Dashboard analytics widgets, draggable kanban cards, glassmorphic product feature cards, interactive pricing matrices, profile cards, horizontal case-study scrollers, music player widgets, weather cards, secure login forms, payment checkout cards, NFT collectibles, crypto wallet balance widgets, game inventory cards, analytics chart cards with warped grid refraction, digital coupon discount cards, hover-reactive profile bio cards, team member spotlight cards, media slider knob cards, smart home thermostat cards, multi-step wizard progress cards, and RPG game inventory HUD cards. Zero dependencies vs Aceternity UI, Magic UI, shadcn glass. Core Web Vitals safe (CLS 0, INP-friendly), WCAG 2.2 AA accessible, MIT licensed.
36 CSS Stacked Cards
36 hand-coded CSS stacked-card designs for SaaS product tours, Apple-style scroll pinning, Tinder-style dating card decks, Airbnb / Zillow listing card stacks, Stripe / Notion / Linear pricing tier presentations, testimonial rotators, and 3D isometric dashboards — scroll-driven scaling stack, horizontal swiper deck (Tinder / Bumble / Hinge pattern), glassmorphic floating testimonials, stacked expansion accordion, interactive fan-out photo stack, 3D perspective hover tilt, progressive disclosure step stack, dynamic tabbed deck (8 new demos), plus 28 classic patterns. 25 pure CSS + 11 with under 40 lines of vanilla JS. WCAG 2.2 accessible, MIT licensed.
18 CSS Product Cards
18 hand-coded CSS product card templates for Shopify Dawn, WooCommerce Storefront, BigCommerce Cornerstone, Stripe Checkout, real-estate listings (Zillow/Redfin/Airbnb/Vrbo), SaaS subscription pricing (Stripe Billing/Chargebee/Recurly), food-delivery grids (DoorDash/Uber Eats/Grubhub), sneaker retail (Nike/StockX/GOAT), and digital-download stores (Gumroad/Sellfy). Hover-reveal Add-to-Cart, pure-CSS 3D flip with spec back, mouse-tracking 3D tilt, glassmorphism, neon glowing border, sale ribbon, color+size picker, quantity stepper, and more. Semantic HTML with schema.org/Product-ready markup for Google Shopping rich results, WCAG 2.1 accessible, MIT licensed.
20 CSS Profile Cards
20 hand-coded CSS profile card templates for team pages, SaaS user menus, portfolios, and creator link-in-bio surfaces — Apple bento grid, Vision-Pro glassmorphism, 3D flip, Instagram slide-up, LinkedIn skeleton, Read.cv perspective tilt, Discord gaming overlay, LinkedIn minimalist, retro cyberpunk, Dribbble neumorphic, conic-gradient border, Material 3 avatar, tabbed profile, Etsy hire-me badge, G2 testimonial, Linktree link-in-bio, Superhuman morphing, Stripe/Vercel/Linear SaaS dropdown. Semantic HTML, WCAG 2.1, prefers-reduced-motion guarded. Copy-paste HTML/CSS (+JS on 3 demos).
20 CSS Cards
20 hand-coded CSS card components for product grids, pricing tiers, blog previews, testimonials, real estate listings, hotel bookings, team profiles, dashboards, and more — plus the visual patterns developers Google for by name (3D flip, glassmorphism, gradient border glow, 3D pop-out, stacked cascade). Copy-paste HTML/CSS, no dependencies, WCAG AA accessible.
23 CSS Flip Cards
23 production-ready CSS 3D flip cards — product feature comparison, e-commerce pricing plans, gift card coupon reveal, bi-fold event ticket, team bio, skill rating, language flashcards, trivia Q&A, gaming trading cards, photo gallery overlay, video playlist thumbnails, testimonial reviews, digital business vCard, restaurant menu recipe, step-by-step process map, vertical rotateX flip, click-to-flip JavaScript toggle, dynamic-height auto-resize, responsive CSS Grid flip card matrix, luxury cube-unfold book-open flip, diagonal rotate3d travel postcard, clip-path iris aperture album reveal, and a clip-path diagonal peel scratch-card reward reveal. 21 pure CSS + 2 CSS + JS — copy, paste, ship.
Form Elements
14 collections
36 CSS Search Bars
36 hand-coded CSS search bars for every product surface — command palette (⌘K), Algolia-style instant search with highlighted results, e-commerce product search with category scope, header navbar sticky search, SaaS dashboard command search, voice input, autocomplete dropdowns, filter chips, recent searches, animated placeholders, glassmorphism, neon glow, and 24 more design and interaction patterns. Every demo scoped under .sb-NN, prefers-reduced-motion guarded, framework-agnostic — copy the CSS into React, Vue, Svelte, Astro, or plain HTML.
21 CSS File Upload Buttons
21 hand-coded CSS file upload buttons and dropzones for SaaS document flows, e-commerce product media, CMS libraries, support ticket attachments, and profile settings. Covers the custom-label button that replaces the unstylable native control, a pure-CSS version with no JavaScript, selected file name and multi-file list feedback, a WCAG-compliant accessible file input, drag-and-drop zones with grid previews and reorderable lists, a full-page drop overlay, image and video preview thumbnails, circular avatar upload with hover edit, multi-image grids with remove badges, upload progress bars with percentage, chunked multi-file progress lists, a success/error/retry state machine, cloud-storage style drop zones, mobile camera capture, clipboard image paste, plus Tailwind and Bootstrap 5 variants. Every upload is scoped under a .fu-NN prefix for no-collision pasting, keeps the native input keyboard-reachable rather than hiding it from assistive technology, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
24 CSS Radio Buttons
24 hand-coded CSS radio button designs covering every real-world use case tier-1 SaaS, e-commerce, fintech, and healthcare products reach for radio inputs in 2026: full selectable cards (:has()-driven with icon + title + meta + price), iOS-style pill segmented control (billing period toggle), radio row with icon tile + title + description subtext (settings-page pattern), dark-mode glowing radio with 3-layer box-shadow breathing pulse, pure-CSS accessible radio using appearance:none (WCAG 1.3.1 canonical reference — no wrapper), plan picker rows with 'Most popular' + 'Best value' gradient badges, concentric ripple animation on check, sliding pill toggle switch (2-seg thumb), interactive 3D sphere radio with orb highlight tracking, ink splash animation on select, rating star radio group (reverse-flex flip pattern), 3D tilt card option selector with cursor-tracked perspective, minimal checkmark radio, product color swatch selector (Shopify/Amazon variant picker), segmented control bar, cyberpunk neon ring radio, subscription pricing plan cards (Stripe/Vercel/Linear billing tier pattern), liquid wave fill on select, image clip-mask option selector (Airbnb/Booking destination picker), gradient border card radio, user profile avatar selector (Netflix who's-watching pattern), stacked vertical radio list, tactile 3D push button radio (skeuomorphic keycap depress), and outer glow pulse radio with dual sonar-ping keyframes. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (Demo 09 orb highlight tracking + Demo 12 3D tilt cursor perspective). Every radio group uses real <input type='radio'> inside <fieldset> + <legend> semantic wrappers so screen readers announce the question before the options, keyboard arrow keys move selection natively, and form-post semantics work zero-config. Every visual is scoped under a unique .crb-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
16 CSS Multi-Step Form UI
16 hand-coded multi-step form UI templates for e-commerce checkout, SaaS onboarding, mortgage and insurance applications, patient intake, KYC verification, financial loan wizards, event registration, university admissions, moving quotes, home services, car rental and non-profit donation flows. Copy-paste HTML, CSS and vanilla JS, WCAG 2.2 accessible, mobile-first.
16 CSS Floating Label Inputs
16 hand-coded CSS floating label input demos — pure CSS float triggers, Chrome autofill fix, live validation states, ARIA-accessible fields, select dropdowns, Material Design outlined text field, filled underline minimal, dark mode with light-dark(), icon inputs, mobile-safe (no iOS zoom), auto-growing textareas, password show/hide toggle, multi-column form grid, plus showcase-tier gradient-ink label, conic border-beam, and staggered letter cascade. Copy-paste, zero deps.
47 CSS Toggles & Switches
47 hand-coded CSS toggle switches with live demos — iOS, Material 3, dark-mode sun/moon, neumorphic, gooey liquid, bouncy physics, ON/OFF text, SaaS pricing pill, haptic keycaps, waveform mute, auto-off timer, biometric hold-to-confirm, split-flap board, permission stack, skeuomorphic light switch, rotary knob, neon cyberpunk, brutalist, day/night scene, 3D flip card, glassmorphism, industrial rocker, ARIA role=switch reference, and more. Copy-paste, zero deps.
29 CSS Checkboxes
29 hand-coded CSS checkboxes and toggle switches for SaaS dashboard settings (Stripe / Vercel / Linear / Notion), e-commerce facet filters (Airbnb / Zillow / Amazon / eBay), subscription pricing tier cards (Stripe Billing / Chargebee / Recurly), Gmail / Notion select-all indeterminate patterns, GDPR cookie consent banners, HIPAA patient portal intake, todo list task completion, and settings panel toggles — 6 brand-new demos (SaaS Dashboard Toggle Switch, Filter Tag Pill Checkbox, Pricing Plan Card Select, CSS Accordion Grid Reveal, Indeterminate Dash Checkbox, WCAG 2.2 Accessible Focus-Ring reference) plus 23 revamped originals covering iOS-style toggle, dark-mode sun/moon, neon glow, brutalist, glassmorphism, neumorphic, liquid fill, gooey blob, 3D flip, draw-stroke checkmark, tri-state indeterminate, magnetic cursor pull, and confetti burst on complete. Real native input type=checkbox preserved throughout for keyboard, screen-reader, and password-manager compatibility. WCAG 2.2 SC 2.4.13 focus appearance + SC 4.1.2 name-role-value compliant, MIT licensed.
30 CSS Login Forms
30 hand-coded CSS login form templates for SaaS authentication panels, multi-tenant account switchers, passwordless magic-link entry, Web3 wallet-connect, Stripe-style minimalist billing, OTP, biometric passkey and password strength meters. Copy-paste HTML and CSS, WCAG 2.2 accessible, mobile-first.
20 CSS Custom Select Dropdowns
20 hand-coded CSS custom select dropdown templates for checkout, dashboards, and SaaS forms — country selector with flags, currency picker with symbols, credit card type selector, pricing plan switcher, multi-select tag chips, date-range picker, and more. WCAG 2.1 combobox pattern with full keyboard navigation, listbox ARIA roles, arrow-key + Enter/Escape support, focus return. Copy-paste HTML + CSS + JS, no library dependencies, no framework lock-in.
22 CSS Star Ratings
22 production-grade CSS star rating designs with live demos and copy-paste code — pure CSS radio-button stars, modern :has() sibling fill, half-star fractional precision, animated SVG burst particles, accessible ARIA fieldset, read-only review displays, emoji reaction scales, neumorphic soft UI, CSS variable customizer, vertical sidebar filter, gradient fills, single-star numeric, heart-based favorites, tooltip hover labels, plus 8 experimental concepts including liquid mercury, holographic scanner, neural pulse, magnetic field lines, quantum superposition, DNA helix, particle constellation, and glitch corrupt-and-resolve. Every star scoped under .sr-NN, copy-paste ready.
17 CSS Range Sliders
17 production-grade CSS range slider designs with live demos and copy-paste code — dual-handle price filter, neumorphic volume, neon glow, emoji mood selector, multi-step milestone, video player seekbar, vertical audio equalizer, circular thermostat dial, gradient fill, bubble tooltip, brutalist thick-block, password strength meter, double-sided balance, retro pixel art, isometric 3D, glassmorphism translucent, and a Liquid Glass slider whose value tooltip is a gooey drop that morphs out of the track (Apple iOS 26 / macOS Tahoe aesthetic). Every slider scoped under .rs-NN, cross-browser styled (webkit + moz + new appearance), reduced-motion guarded, copy-paste ready.
12 CSS Steppers
12 hand-coded CSS stepper UI components covering every production multi-step flow pattern — multi-step form wizard with progress indicator, numbered step progress bar, e-commerce checkout stepper with sidebar order summary, vertical timeline stepper, animated step indicator with icons, onboarding stepper flow (Notion/Linear/Vercel style), breadcrumb-style step tracker, stepper with validation states (success/error/warning), circular SVG progress indicator, glassmorphism stepper, dark mode stepper, and stepper with animated connector lines. All use semantic HTML with proper <code>aria-current="step"</code> and <code>aria-valuenow</code> attributes for screen reader accessibility, scoped <code>.stp-NN__*</code> class names so multiple steppers coexist on the same page without style bleed, respect <code>prefers-reduced-motion</code>, and ship MIT-licensed. 11 use ~30-50 lines of vanilla JavaScript for step navigation, validation, and state persistence; 1 demo (the checkout stepper) is fully static — useful as a display-only progress indicator inside an existing wizard. Drop into any stack: React, Vue, Astro, Svelte, Rails ERB, plain HTML — zero framework dependencies.
28 CSS Input Fields
28 hand-coded CSS input fields for sign-up flows, e-commerce checkouts, SaaS onboarding, HIPAA patient portals, banking forms, and password reset screens — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card, tag chip, inline edit, and more. Semantic HTML, WCAG 2.1, copy-paste ready.
20 CSS Form Validation
20 hand-coded CSS form validation patterns built on native HTML5 constraint validation. Covers the :user-invalid pseudo-class that stops a required field turning red before anyone has typed, inline error messages that reserve their layout space so nothing shifts, required checkbox groups that native HTML cannot express on its own, confirm-password matching through setCustomValidity, character counter limit warnings, the aria-invalid and aria-describedby contract screen readers need, a :has() validation summary box, forced-colors support, and the real-world forms most tutorials skip — checkout card fields with correct autocomplete tokens, relative date ranges, and dark mode validation tokens.
Other Components
8 collections
22 CSS Progress Bars
22 hand-coded CSS progress bar patterns — native progress element, fetch upload progress, streaming response, view transition page load, password strength, download queue, dark-mode color-mix tokens, WCAG 2.2 accessible progress, video buffering, conic ring, segmented battery, speed gauge and more.
22 CSS Skeleton Loaders
22 hand-coded CSS skeleton loaders — React Suspense fallback, Next.js loading UI, prefers-reduced-motion fallback, dark-mode color-mix, SVG blur-up image, clamp sizing, cross-fade, ARIA live-region, timing recipe, CLS-preserving min-height, plus avatar, article, table, stats, comments, media list, chip cluster.
25 CSS Testimonials & Reviews
25 hand-coded CSS testimonial and review card templates for SaaS landing pages, e-commerce product pages, agency case studies, course platforms, real-estate sites, and fintech trust sections. Covers wall-of-love CSS-columns grids, verified trust banners, star-rating product review cards, scroll-snap carousels with ::scroll-marker dots, video testimonial modals built on the native dialog element, Trustpilot and Google-style review widgets, before/after case-study metric blocks, mobile swipe decks, read-more line-clamp cards with calc-size() height animation, hero pull-quotes, dark editorial cards, neo-brutalist reviews, bento social-proof grids, glassmorphism cards, restaurant reviews, minimalist agency quotes, Web3 conic-gradient glow borders, EdTech course reviews, real-estate client reviews, esports cards, fashion editorial quotes, fintech trust badges, clean white grids, horizontal sliding rows and staggered portrait grids. Every card uses figure/blockquote/figcaption semantics with a single role=img star rating, is scoped under a .tr-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
21 CSS Pricing Tables
21 production CSS pricing tables and pricing card templates — monthly/annual billing toggle, currency switcher, feature comparison matrix, dark-mode adaptive cards, most-popular border-beam glow, 3D flip plans, usage-based volume slider, bundled checkbox calculator, glassmorphism, gradient border draw-in, ribbon folds, neumorphic tiers, mobile swipe carousel, accordion stacking, skeleton loading states. Copy-paste, zero deps.
36 CSS Modals
36 hand-coded CSS modal templates for real-world industry scenarios — SaaS auth (login, signup, forgot password), Stripe payment checkout, HIPAA patient consent, GDPR cookie preferences, paywall content lock, shopping cart drawer, product quick view, size chart guide, video and image lightboxes, delete confirmation, success/error feedback, multi-step onboarding, advanced filter panel, contact form, settings panel, Cmd+K command palette, restaurant reservation, order success, terms of service, and password reset. 18 new native `<dialog>` + `@starting-style` demos (Chrome 117+, Safari 17.5+, Firefox 129+) with automatic focus trap, Escape closes, inert background, ::backdrop with backdrop-filter blur — all for free. Plus 18 original custom-CSS demos with the WCAG 2.1 dialog pattern hand-wired (role='dialog', aria-modal='true', aria-labelledby, focus trap, focus return on close). Compliance callouts embedded per demo (PCI DSS, HIPAA, GDPR Article 7, NIST SP 800-63B, PSD2 SCA, CCPA). MIT licensed.
20 CSS Image Sliders
20 hand-coded CSS image sliders and carousels covering product galleries, real-estate listings, before/after comparisons, hero banners, testimonial carousels, and SaaS onboarding scrollers. WCAG-friendly, no-JS options, Core Web Vitals safe.
27 CSS Calendars
27 hand-coded CSS calendar UIs for SaaS scheduling (Calendly / Cal.com / SavvyCal patterns), Airbnb / Vrbo / Booking.com date-range pickers, healthcare Epic MyChart / Zocdoc appointment slots, real-estate Zillow / Redfin showing schedulers, event planners, advent countdowns, and bento booking systems — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, vintage paper tear-offs, vertical timelines, kinetic typography. WCAG 2.2 accessible, MIT licensed.
22 CSS Avatars
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.