ui templates
All collections tagged with "ui templates"
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.
11 CSS animation-timeline Demos
11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.
25 CSS Background Animations
25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
20 CSS Banners & Alerts
20 hand-coded CSS banner and alert bars for e-commerce storefronts, SaaS dashboards, marketing sites, and compliance-bound products. Covers GDPR cookie consent with a real preferences panel, promo bars with countdown timers, free-shipping threshold progress, app-install smart banners, maintenance and incident status bars, newsletter signup bars, age verification gates, limited-stock urgency banners, live event announcements, browser upgrade notices, geo and currency switchers, sticky top announcement bars, bottom cookie bars, inline form validation alerts, icon-aligned alert banners, left-border accent alerts, diagonal stripe promos, full-width hero banners, animated gradient border alerts, and a text-wrapping laboratory that shows five strategies for the unbreakable string that breaks more banners than anything else. Every bar is scoped under a .ba-NN prefix for no-collision pasting, guards prefers-reduced-motion, carries the correct aria-live and role semantics, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
20 CSS Blog Layouts
20 hand-coded CSS blog and editorial layouts for magazine homepages, news sites, personal archives, newsletter back-issues, recipe and podcast blogs, developer tutorials, and long-form journalism. Covers a magazine homepage with hero plus editor-picks rail, a news homepage with breaking-news ticker, blog archives with sticky year separators, Substack-style issue-numbered archives, recipe card grids with prep-time badges, podcast episode lists with waveforms, long-form articles with scroll-driven reading progress, drop caps and floated pull quotes via first-letter, Medium-style 65ch centred reader layouts, dev tutorials with a sticky code panel beside prose, interview transcripts with alternating speakers, case-study pages with stat counters, video blogs with an episode rail, full-bleed photo essays, news articles with sticky related-stories sidebars, documentation pages with prev/next chapter nav, a standalone blog post card, a scroll-snap category filter bar, an inline newsletter callout that breaks out of the prose column, and a horizontal featured-post rail. 12 are pure CSS with zero JavaScript. Every layout is scoped under a .bl-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 CSS Brutalism
22 hand-coded brutalist and neubrutalist CSS designs covering the full spectrum of the aesthetic — from the anti-design brutalism of 2014-2018 (raw system fonts, zero border radius, monochrome density, visible structure) through to the neubrutalism of 2021-present (bright pastel fills, thick black borders, hard offset shadows with zero blur, rounded blocks). The neubrutalist half ships SaaS pricing cards with sticker badges, a pastel admin dashboard, signup forms, rotated feature cards, an offset-shadow navbar, a playful button set, a native dialog modal, a testimonial wall, blog cards, chunky toggles, a landing hero, an image gallery, stats panels and a rounded footer. The brutalist half covers product grids, raw form controls, a monochrome data dashboard, a portfolio index, indie SaaS pricing, Windows 95 desktop chrome, editorial long-read and a streetwear catalog. Every design is scoped under a .brt-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
15 CSS Chat Bubbles
15 hand-coded CSS chat bubbles for messaging apps, AI assistant interfaces, customer support widgets, and testimonial sections. Covers the pure-CSS bubble with a pseudo-element arrow tail, iMessage and WhatsApp Web recreations, a ChatGPT-style AI response bubble, a Tailwind variant, animated typing indicators, avatar-paired bubbles, a live support widget, bordered and comic-book speech bubbles, image attachments, voice messages with a scrubable waveform, a full chat screen built on flexbox, thought bubbles, and a testimonial card built from a speech bubble. Every bubble is scoped under a .cb-NN prefix for no-collision pasting, uses real semantic markup rather than div soup, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
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.
26 CSS Circular Menus
26 hand-coded CSS circular and radial menu designs, from the floating-action FAB speed dial and dashboard radial hubs to game-style pie-slice wheels, SVG gooey metaball fans, hexagonal honeycombs, iris-aperture reveals, orbiting satellites on offset-path, compass-rose directional nav, sci-fi HUD rings, glassmorphism popovers built on the native Popover API, vinyl-record players, and full-takeover nebula overlays on native dialog. Every design uses CSS trigonometry (sin(), cos()) or the counter-rotation trick for positioning, ships real keyboard navigation, aria-labels on icon-only buttons, and a prefers-reduced-motion guard. Copy-paste HTML, CSS and vanilla JS with zero framework dependencies — MIT licensed.
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts covering the exact patterns SaaS builders, admin-panel devs, fintech UI teams and analytics-tool designers actually ship: modern CSS Grid bento dashboards, collapsible-sidebar admin shells, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent-scroll panels, grid-template-areas boilerplates, off-canvas drawer dashboards, container-query responsive widgets, e-commerce merchant control panels, dark-mode CSS-variable systems, multi-level nested sidebars, zero-dependency vanilla shells, AI copilot split layouts, sticky-header + sticky-column data grids, modular masonry boards, 100vh no-scroll command centers, and horizontal top-nav app frames. 14 truly Pure CSS + 3 with a tiny optional vanilla JS snippet. Every dashboard is scoped under a unique .cdl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, 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.
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.
28 CSS Hamburger Menus
28 hand-coded CSS hamburger menus covering the exact patterns SaaS builders, e-commerce teams, mobile-app designers, and marketing sites actually ship: clip-path circle expand, ARIA-audited keyboard-navigable, animated 3-line to X icon morphs, off-canvas drawers with dimmed backdrops, pure CSS checkbox-hack (zero JavaScript), integrated search + social drawers, glassmorphism backdrop-blur overlays, push-canvas content shifts, full-screen mobile takeovers, slide-out sidebars, responsive navbar toggles with media queries, minimalist floating buttons, Tailwind CSS component recipes, Bootstrap 5 navbar toggler setups, WCAG 2.2 AA dialogs with focus trap + Escape, grid-template-rows slide-down dropdowns, mobile bottom nav bars with floating FAB, multi-level accordion nested menus with <details>, flexbox right-aligned patterns, radial ripple expansions, sticky shrinking icons on scroll, neumorphic soft-UI toggles, brutalist bordered icons, and 3D flip canvas transforms. 11 truly Pure CSS + 17 with a tiny optional vanilla JS snippet + 1 Tailwind + 1 Bootstrap 5 wiring. Every menu is scoped under a unique .chm-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
12 CSS Image Reveal on Scroll
12 production-grade CSS image-reveal-on-scroll demos — industry-templated heroes for fintech, luxury, SaaS, real estate, insurance, editorial, agency, enterprise, legal, healthcare, mortgage, and travel verticals. Built on the W3C animation-timeline: view() spec with IntersectionObserver fallbacks. Real free Unsplash images bundled, compliance-aware copy (FDIC, HIPAA, TILA, ABA Rule 7.1, Fair Housing), copy-paste ready.
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.
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.
20 CSS Neon Text Effects
20 hand-coded CSS neon text effects for SaaS hero CTAs, Twitch/streaming overlays, cyberpunk retail signage, 80s synthwave portfolios, and dark-mode fintech dashboards — neon glow button hover, flashing sign, realistic flickering tube, hollow text-stroke outline, LED 7-segment clock, animated @property hue rotation, low-INP compositor motion, Tailwind utility, glitch, on/off toggle, gradient-flow terminal. Layered text-shadow + box-shadow, WCAG-friendly, copy-paste ready.
20 CSS Pagination
20 hand-coded CSS pagination designs for admin dashboards, e-commerce product grids, blog archives, search results, and documentation sites. Covers pure-CSS no-JavaScript pagination driven by the :target selector, ellipsis truncation for large page ranges, responsive layouts that collapse from full numbers to a compact page-X-of-N on mobile via container queries, first/last/prev/next icon buttons, a jump-to-page input, an items-per-page selector, Tailwind CSS and Bootstrap 5 variants, WCAG-compliant ARIA markup with aria-current and visible focus rings, data-table and admin bars, e-commerce grids with result counts, blog archives, cursor-based load-newer/older feeds, sliding pill active indicators, hover underline animations, 3D flip perspective keys, vertical side-docked rails, full-width fluid splits, glassmorphism, and neumorphic soft UI. 16 are pure CSS with zero JavaScript. Every design is scoped under a .pgn-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
16 CSS Portfolio Layouts
16 hand-coded CSS portfolio layouts covering the exact patterns freelance developers, UX/UI designers, product designers, illustrators, photographers and agency teams actually ship for their own portfolio sites: responsive CSS-Grid galleries with fr tracks and auto-fit minmax, Apple-style bento grids, no-JS native masonry walls, sticky-sidebar flexbox splits, hover-overlay project grids with staggered scrims, scroll-snap horizontal showcases, 50/50 split-screen heroes with :has() accent recoloring, dark-mode CSS-variable token systems, single-page developer portfolios with anchor navigation and scroll-timeline progress rails, UX case-study articles with 1fr/62ch/1fr content grids, ultra-minimalist graphic-design indexes with clip-path thumb reveals, freelancer layouts with testimonials plus 3-tier pricing, beginner-friendly auto-fit card grids, 3D card-flip project tiles, full-screen 100svh hero openers with view()-timeline parallax and sticky header+sidebar app-shell templates. 14 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every portfolio is scoped under a unique .cpl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
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.
20 CSS Ribbons
20 hand-coded CSS ribbons and ribbon banners for e-commerce product cards, SaaS pricing tables, blog article thumbnails, open-source project pages, award and certificate seals, and coupon campaigns. Covers corner sale ribbons with wrapped tails, sold-out overlays with muted disabled state, bestseller and featured badges, the GitHub fork-me corner ribbon rebuilt without an image, notched clip-path corner badges, full-width swallowtail V-cut banners, skewed 3D headers, most-popular pricing bands, annual-savings billing badges, bookmark flag tags, hanging ribbon bookmarks, award rosettes with dangling tails, certificate trust seals, 3D folded paper banners, coupon ribbons with dashed tear-off edges, stitched craft borders, hover-unfold animations, slide-in notification ribbons, waving flag keyframes, and a modern single-element clip-path polygon build with no pseudo-elements. 16 are pure CSS with zero JavaScript. Every ribbon is scoped under a .rib-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
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.
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.