Skip to content

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 330 components

Latest components

Cleaning Service Homepage Template – Bootstrap 6 home pages preview

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.

Auto Repair Shop Homepage Template – Bootstrap 6 home pages preview

Auto Repair Shop Homepage Template

Bootstrap 6 auto repair shop homepage with service price tabs, a step-by-step booking form with live estimate and calendar, repair tracker, reviews carousel and FAQ.

Car Dealership Homepage Template – Bootstrap 6 home pages preview

Car Dealership Homepage Template

Bootstrap 6 car dealership homepage with inventory search, filterable vehicle cards, a loan payment calculator, pre-approval dialog, reviews and test drive booking.

Interior Design Homepage Template – Bootstrap 6 home pages preview

Interior Design Homepage Template

Warm Bootstrap 6 interior design homepage with arched photo hero, services, tabbed portfolio, before/after range slider, process accordion, reviews and a consultation form with datepicker.

Architecture Studio Homepage Template – Bootstrap 6 home pages preview

Architecture Studio Homepage Template

Bootstrap 6 architecture studio homepage with a drawer navbar, filterable project grid with detail dialog, philosophy, process stepper, client quotes, awards and an enquiry form.

Payment Failed Email – Pure CSS email templates preview

Payment Failed Email

Email-safe card declined template with an alert banner, subscription and amount summary, decline reasons, update payment button and relative retry wording.

FAQ with Category Tabs – Bootstrap 5 faq sections preview

FAQ with Category Tabs

Bootstrap 5 FAQ section where category pills switch between separate accordion sets, with question counts and a support card.

Product Detail with Image Zoom Lens – Tailwind CSS product details preview

Product Detail with Image Zoom Lens

Tailwind CSS product detail section with a round magnifier lens that zooms the photo on hover or arrow keys, plus adjustable 2x to 4x levels.

Bottom Sheet Mobile Menu – Pure CSS mobile menus preview

Bottom Sheet Mobile Menu

Dark mobile app menu that slides up from the bottom as a rounded sheet with a drag handle, quick action tiles, scrim, focus trap and swipe to close.

Pinterest-Style Pin Board – Bootstrap 5 social feeds preview

Pinterest-Style Pin Board

Bootstrap 5 masonry pin board with photo pins, topic filter chips, save buttons and a live saved counter.

Construction Company Homepage Template – Bootstrap 6 home pages preview

Construction Company Homepage Template

Dark Bootstrap 6 construction company homepage with a photo hero, live project tracker, services grid, filterable projects with detail dialog, process stepper, safety stats, testimonials and bid form.

Insurance Company Homepage Template – Bootstrap 6 home pages preview

Insurance Company Homepage Template

Bootstrap 6 insurance company homepage with an instant quote form, coverage cards, bundle plans with yearly pricing, claims stepper and dialog, reviews, FAQ and agent CTA.

3D Coverflow Image Carousel – Pure CSS carousels preview

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 – Pure CSS navbars preview

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 shopping carts preview

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 – Pure CSS search bars preview

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 inputs preview

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 – Bootstrap 6 home pages preview

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

  1. Find a component by category or with the search box.
  2. Check the live preview, or open it full screen in a new tab.
  3. 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.