components
All collections tagged with "components"
32 CSS Accordions — Vertical & Horizontal
32 free CSS accordions covering pure-CSS FAQ blocks with details/summary, mobile navigation menus, e-commerce filter sidebars, nested tree views, exclusive single-open groups and smoothly animated height:auto — plus 26 visual variations in vertical, horizontal and hybrid layouts. Copy-paste HTML and CSS, no JavaScript.
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 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.
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.
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.
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.
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.
25 CSS Footer Designs
25 hand-coded CSS footer designs for SaaS marketing pages, e-commerce storefronts, agency portfolios, documentation sites, mobile apps, and local business sites. Sticky footer with flexbox and CSS grid, responsive 4-column category-link footer, SaaS mega footer with resource grid, minimalist logo + copyright, e-commerce footer with payment icons and security badges, dark mode toggle footer, local-business footer with embedded Google Maps and office hours, mobile-first collapsible accordion, social media follow icons, SaaS SOC 2 / GDPR / HIPAA compliance badge footer, animated gradient background, newspaper masthead multi-column, full-width newsletter signup, card layout with contact details, monospaced developer portfolio, audio player music website, dark mode glowing neon, centered minimalist blog, multi-column mega grid, integrated contact form + map, trust badges + guarantee icons, accordion FAQ, pre-footer call-to-action bar, multi-language + currency selector, and animated SVG wave. 16 Pure CSS + 9 Light JS. Every design scoped under .ft-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
11 CSS Glassmorphic Sticky Navbars
11 hand-coded CSS glassmorphic sticky navbars using backdrop-filter blur + saturate: SaaS landing header, scroll-triggered frost, dark cyberpunk, floating pill, glass mega menu, mobile drawer, Core Web Vitals baseline, animated conic border, WCAG-AA accessible, React + Framer Motion, minimalist portfolio. Every navbar is position:sticky with proper scroll containers. Zero dependencies, framework-agnostic, MIT licensed.
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.
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.
12 CSS Infinite Marquee Designs
12 production-ready CSS infinite marquee demos — as-seen-in press logo bars, B2B client logo walls, sponsor & exhibitor tier rows, e-commerce USP text tickers, live stock and crypto price tickers, flash-sale announcement bars, auto-sliding testimonial rails, portfolio tech-stack scrollers, image-heavy brand walls, vertical agency-services columns, draggable inertia marquees and scroll-velocity reactive marquees. Every loop is seamless, pause-on-hover, WCAG-friendly, and copy-paste.
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 Liquid Glass Effects
20 hand-coded CSS Liquid Glass effects inspired by Apple's iOS 26 / macOS Tahoe / iPadOS 26 / watchOS 26 / tvOS 26 / visionOS design language (WWDC 2025) — the fastest-rising design search cluster for US / UK / CA / AU / DE front-end developers. Refractive cards with SVG feDisplacementMap, glossy capsule buttons with specular sweeps, glassmorphic navigation bars, gooey toggles via feGaussianBlur + feColorMatrix, modal dialogs, theme switchers, input fields, SVG feTurbulence displacement backgrounds, dropdowns, pricing tables, tooltips, audio players, range sliders, toast notifications, sidebars, accordions, login cards, floating action buttons, loading skeletons, and multi-step form wizards. Zero-bundle copy-paste HTML + CSS, Tailwind-compatible (backdrop-blur-xl / bg-white/10 / rounded-full utilities map 1:1), Core Web Vitals safe (CLS 0, INP-friendly, compositor-only transforms), WCAG 2.2 accessible with prefers-reduced-motion and prefers-reduced-transparency fallbacks, MIT licensed.
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.
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.
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.
25 CSS Number Counter Animations
25 animated number counters for SaaS landing pages, dashboard KPIs, e-commerce sales tickers, fundraising progress meters, product launch countdowns, fitness rings, stock tickers, ESG impact dashboards, and gamified milestone widgets. Copy the HTML, CSS, and requestAnimationFrame count-up JS — no libraries, no build step.
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.
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.
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.
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).
18 CSS Scroll Progress Bar
18 hand-coded CSS scroll progress bar designs for blog article readers, SaaS onboarding wizards, e-commerce checkout flows, documentation sites, image carousels, and long-form landing pages. Top fixed reading bar with animation-timeline: scroll(), sticky header with integrated glassmorphic progress bar, floating radial SVG progress ring with @property registered angle, percentage counter tooltip, back-to-top button with circular morph, gradient multi-color bar, vertical side-docked line, container-scoped inside a div, multi-section TOC tracker with IntersectionObserver scrollspy, step-segmented section-by-section bar, horizontal carousel scroll bar with snap points, e-commerce checkout step progress on scroll, signup onboarding form scroll progress with localStorage save-and-restore, Tailwind CSS @theme + arbitrary values recipe, custom ::-webkit-scrollbar with progress indicator, rainbow hue-rotating bar, cyberpunk neon glow dark mode bar, and ultra-thin 2px minimalist micro progress line. All 18 use animation-timeline: scroll() where supported with rAF scroll listener fallback for Safari + Firefox — no jank, no library, no scroll-listener anti-patterns. Every design scoped under .sp-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
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.
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.
25 CSS Sticky Navigation
25 hand-coded CSS sticky navigation patterns for SaaS marketing headers, documentation shells, e-commerce storefronts, article readers, and mobile app views. Pure CSS position:sticky with zero JavaScript, responsive hamburger toggle, shrink-on-scroll header, hide-on-scroll-down / reveal-on-scroll-up, transparent-to-solid over hero, article reading progress bar, wordmark-to-mark logo morph, underline-slide active indicator, theme-aware token swap, split centered-logo layout, neumorphic soft-UI, multi-column mega menu dropdown (e-commerce), search bar + cart badge counter, announcement bar stacked above nav, sticky sub-navigation locked under main header, icon-to-full-width search expand, sticky sidebar table-of-contents (Docusaurus / Mintlify pattern), mobile bottom tab bar with env(safe-area-inset-bottom), active-section scrollspy, horizontal snap-scroll tab bar, and a social-share icon strip for articles. 7 Pure CSS + 18 Light JS. Uses @container scroll-state(stuck:top), animation-timeline: scroll(), IntersectionObserver, and standard scroll listeners as appropriate per demo. Every design scoped under .sn-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
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.
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.