Copy-paste UI components

Bootstrap 6 Dialog wizard with three steps, a Stepper and progress bar, back/next buttons, per-step validation, Chips email invites and a review screen.

Bootstrap 6 Modals

Newsletter Popup Dialog

Bootstrap 6 Dialog newsletter popup with a photo side, email signup with validation, a don't-show-again option, delayed auto-open and a confirmation state.

Bootstrap 6 Modals

Image Lightbox Dialog

Dark Bootstrap 6 Dialog lightbox that opens gallery thumbnails large, with previous/next buttons, arrow-key and swipe navigation, captions and a photo counter.

Bootstrap 6 Modals

Fullscreen Dialog on Mobile

Dark Bootstrap 6 Dialog for notification settings that is centered on desktop, fullscreen on phones, with a scrollable body of switches and a sticky footer.

Bootstrap 6 Modals

Login Dialog with Social Buttons

Bootstrap 6 Dialog login form with Google, Apple and GitHub sign-in buttons, email and password fields, show-password toggle, validation and a success state.

Bootstrap 6 Modals

Salon Appointment Booking Screen

Salon appointment booking screen with service cards, stylist avatars, a 14-day date strip, a time slot picker and a summary sheet with confirm, built for mobile.

Tailwind CSS Mobile Booking Screens

Habit Tracker Dashboard

Habit tracker app dashboard with a week strip, progress ring, habit list with check buttons and streak counts, and an add-habit bottom sheet for mobile sites and PWAs.

Bootstrap 5 Mobile Dashboards

Banking App Dashboard

Banking app dashboard screen with a hideable balance card, send, request and top up sheets, a weekly spending chart, recent transactions and a bottom tab bar.

Tailwind CSS Mobile Dashboards

Customer Support Chat Screen

Customer support chat screen for mobile apps with agent header, order card message, quick reply chips, star rating request, typing indicator and a message composer.

Pure CSS Mobile Chat & Messaging

Fitness Tracker Daily Dashboard

Fitness tracker app dashboard with move, exercise and stand activity rings in SVG, steps and calories cards, a weekly bar chart and a workouts list for the selected day.

Bootstrap 5 Mobile Dashboards

Most copied

Responsive Navbar with Hamburger Menu

Accessible pure CSS navbar that collapses into a hamburger menu on small screens.

Pure CSS Navbars

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.

Pure CSS Carousels

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.

Pure CSS Navbars

Split Hero with Diagonal Photo Clip

Pure CSS split hero with headline, buttons and stats beside a full-height photo cut on a diagonal with clip-path, plus an accent stripe and rating badge.

Pure CSS Hero Sections

Hero with Rotating Words

Dark hero section whose headline cycles through words with a slide-and-fade animation, a pause button and decorative stat cards.

Pure CSS Hero Sections

Simple Centered Footer

Minimal centered footer in pure CSS with a logo, tagline, links with animated underlines, round icon links and an auto-updating copyright year.

Pure CSS Footers

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 6, 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.