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

Latest components

Travel Agency Homepage Template – Bootstrap 6 home pages preview

Travel Agency Homepage Template

Bootstrap 6 travel agency homepage template with a photo hero and trip search, region-filtered destinations, tour packages with a budget slider, itinerary dialog, stories carousel and newsletter.

Bakery Homepage Template – Bootstrap 6 home pages preview

Bakery Homepage Template

Warm Bootstrap 6 bakery homepage template with an arched photo hero, tabbed product menu with tray, story stepper, cake order form with datepicker, reviews and a Bread Club dialog.

Furniture Store Homepage Template – Bootstrap 6 home pages preview

Furniture Store Homepage Template

Warm Bootstrap 6 furniture shop homepage with a shop-the-look hero, room collections, bestseller tabs with fabric swatches, showroom booking with datepicker, reviews carousel and FAQ.

Electronics Store Homepage Template – Bootstrap 6 home pages preview

Electronics Store Homepage Template

Dark Bootstrap 6 electronics shop homepage with a bento deals hero, live flash-sale countdown, filterable product grid, cart drawer, trade-in estimator, reviews and newsletter.

E-commerce Fashion Store Homepage Template – Bootstrap 6 home pages preview

E-commerce Fashion Store Homepage Template

Editorial Bootstrap 6 fashion store homepage with a centered-logo navbar, lookbook hero, category tiles, filterable new arrivals, cart drawer, sale countdown, reviews and newsletter signup.

Scheduled Maintenance Notice Email – Pure CSS email templates preview

Scheduled Maintenance Notice Email

Email-safe service maintenance notice with a relative maintenance window, affected services table with impact labels, what to expect list and status page button.

Scrollable Tabs for Mobile – Bootstrap 5 tabs preview

Scrollable Tabs for Mobile

Bootstrap 5 tabs that scroll horizontally on small screens, with fade edges, arrow buttons, scroll snapping and the active tab centered automatically.

Card Carousel with Peek of Next Slide – Tailwind CSS carousels preview

Card Carousel with Peek of Next Slide

Swipeable Tailwind CSS photo card carousel with scroll snap, a peeking next card, arrow buttons, dots and keyboard support.

Stats with Circular Progress Rings – Pure CSS stats sections preview

Stats with Circular Progress Rings

Dark stats section with four SVG circular progress rings that fill and count up to their percentage when scrolled into view.

Photographer Portfolio with Photo Grid – Bootstrap 5 portfolios preview

Photographer Portfolio with Photo Grid

Dark Bootstrap 5 photographer portfolio with subject filters, a full-bleed dense photo grid with wide and tall tiles, hover captions and a modal lightbox.

Kindergarten Homepage Template – Bootstrap 6 home pages preview

Kindergarten Homepage Template

Playful Bootstrap 6 kindergarten homepage with a drawer navbar, photo collage hero, program tabs, daily rhythm stepper, teacher cards, parent reviews and a visit booking form.

University Homepage Template – Bootstrap 6 home pages preview

University Homepage Template

Classic Bootstrap 6 university homepage with a campus photo hero, visit datepicker, program finder tabs, news, upcoming events, student testimonials carousel and admissions form.

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.

Feature Cards with Hover Glow – Pure CSS feature sections preview

Feature Cards with Hover Glow

Dark pure CSS feature grid whose card borders and backgrounds light up with a colored glow that follows the mouse pointer.

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.