Sticky Add to Cart Bar for Shopify
Shopify section: a bar fixed to the bottom of product pages that appears once the main add-to-cart button scrolls away, with image, price, variant select and a real product form.
Copy-paste UI components
Free HTML, CSS and JavaScript components for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Preview live, copy the code, ship faster.
Browse by category
All 341 componentsLatest components
Nonprofit Charity Homepage Template
Warm Bootstrap 6 charity homepage with arch photo hero, impact stats, filterable causes with progress bars, an impact slider, a donation form, story carousel, FAQ and footer.
Barbershop Homepage Template
Dark Bootstrap 6 barbershop homepage with a drawer navbar, price-list tabs, barber cards, a booking form with Combobox and Datepicker, reviews, live opening hours and a footer.
Beauty Salon Homepage Template
Dark plum Bootstrap 6 beauty salon homepage with arched photo hero, tabbed price list with a service basket, artists, review carousel, online booking calendar and gift cards.
Pet Care and Vet Homepage Template
Warm Bootstrap 6 veterinary clinic homepage with live open status, filterable services and prices, first-visit stepper, vet team, pet reviews and an appointment form.
Plumber and Home Services Homepage Template
Bold navy and orange Bootstrap 6 plumber homepage with a 24/7 emergency bar, call-back form, service area map with ZIP checker, flat-rate price table, review carousel and FAQ.
Event Invitation Email with RSVP
Dark email-safe event invitation with stage photo, date/time/location table, agenda highlights, Yes/No RSVP buttons and add-to-calendar links.
Sliding Login and Register Form
Pure CSS sign in and sign up forms with a gradient overlay panel that slides between them, plus a mobile switcher and client-side validation.
Stats Section with Background Image
Bootstrap 5 stats section with four key numbers in glass cards over a darkened background photo, with a count-up animation on scroll.
Back to Top Button that Fades In
Floating Tailwind CSS back-to-top button that fades in after scrolling, smooth-scrolls up and returns keyboard focus to the page title.
Team Cards with Grayscale to Color Photo Hover
Pure CSS team section where grayscale portraits turn to full color, zoom in slightly and reveal social links on hover or keyboard focus.
Cleaning Service Homepage Template
Fresh mint Bootstrap 6 cleaning service homepage with a quick price check hero, package prices by frequency, room checklist tabs, live booking estimate, reviews and FAQ.
Most copied
3D Coverflow Image Carousel
Coverflow-style image carousel with rotated 3D side photos, reflections, captions, dots, swipe and keyboard navigation in pure CSS and vanilla JS.
Navbar with Sliding Active Indicator
Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.
Mini Cart Dropdown
Bootstrap 5 navbar mini cart dropdown with quantity steppers, remove buttons, free-shipping progress, live subtotal and checkout button.
Expanding Search Bar
Search icon button that expands into a pill-shaped input, shown in a dark navbar and a large hero search, with Escape to close and a demo submit.
Password Strength Meter
Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.
Fitness Gym Homepage Template
Dark Bootstrap 6 gym homepage with drawer navbar, photo hero, programs, a weekly class timetable, membership plans with a range-based recommender, coaches and a free-pass form.
What is WebDevSnippets?
WebDevSnippets is a free library of ready-to-use UI components for web developers. Every component is plain HTML, CSS and vanilla JavaScript, built for Bootstrap 5, Tailwind CSS or pure CSS, so it drops into any project and any stack without a build step or extra dependencies.
The library covers the parts every website needs: navigation bars, hero sections, cards, forms, pricing tables, modals, footers and e-commerce blocks, as well as complete page templates for homepages, about, services, contact and pricing pages. New components are added every day.
Choose the design you actually want
Ask an AI coding assistant for "a pricing section" or "a landing page" and it either guesses a layout from your words or makes one up, and you spend the next hour explaining what you really meant. WebDevSnippets works the other way round: you browse real, working designs, compare them in the live preview and pick the one you like.
Found it? Click Download HTML on the component page. You get a single file with the markup, styles and script, ready to use in two ways:
- Build it yourself: open the file, copy what you need into your project and adjust the colors and text.
- Give it to your AI assistant: attach the file and ask it to use this design in your project, for example "build our pricing section like this file, using our components and brand colors". The AI then follows the design you chose instead of inventing one.
Either way, your project looks the way you decided, not the way a prompt happened to turn out.
How it works
- Find a component by category or with the search box.
- Check the live preview, or open it full screen in a new tab.
- Copy the HTML, CSS and JavaScript, or download everything as one HTML file, and use it yourself or with your AI assistant.
All components are free for personal and commercial projects, including client work; see the license. For colors, the free developer tools include a color picker, palette generator, tints and shades and a WCAG contrast checker.