21 Components
Every collection tagged “components” — each one a set of hand-coded demos with copy-paste code and a live preview.
Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
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 CSS button groups for SaaS pricing toggles, iOS-style segmented controls, app toolbar actions, Web3 wallet-connect grids, AI model pickers, and date-range presets. Covers split buttons with Popover API dropdowns, radio-driven filter pills with sliding thumbs, single-select alignment toggles, multi-select tag chips, floating action buttons with radial fan-out menus, and view-switcher segments with morphing highlights. Keyboard-accessible, modern CSS.
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.
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.
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).
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.
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.
20 CSS Liquid Glass Effects
Liquid glass and glassmorphism UI patterns built with backdrop-filter blur, translucent surfaces, and SVG displacement refraction. Covers glass cards, glossy buttons, frosted navbars, gooey toggle switches, blurred modals and dropdowns, pricing tables, login and multi-step form cards, sliders, tooltips, toasts, sidebars, accordions, audio players, and loading skeletons. Semantic HTML, modern CSS, copy-paste ready.
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 aria-current="step" and aria-valuenow attributes for screen reader accessibility, scoped .stp-NN__* class names so multiple steppers coexist on the same page without style bleed, respect prefers-reduced-motion, 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 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.