Copy-paste UI components

Restaurant cover hero with a full-width photo background, dark overlay, Book a table and View the menu buttons and an opening hours row, built only with core blocks.

WordPress Hero Sections

Customer Testimonials Section for Shopify

A Shopify section for customer quotes with star ratings, avatars and linked products, shown as a grid or a scrolling row with previous and next buttons.

Shopify Testimonials

Fitness Class Schedule and Booking

Fitness class schedule app screen with day tabs, class cards showing time, coach and spots left, book and waitlist buttons, a booking sheet and a booked state.

Bootstrap 6 Mobile Booking Screens

Restaurant Table Reservation Screen

Restaurant table reservation screen with a party size stepper, date strip, lunch and dinner time chips, seating preference, a details sheet and a booking confirmation state.

Bootstrap 6 Mobile Booking Screens

Hotel Booking Details Screen

Hotel booking details screen with a swipeable photo gallery, amenities, room options, a check-in and check-out date picker sheet and a reserve bar with the live total.

Bootstrap 6 Mobile Booking Screens

Smart Home Control Dashboard

Smart home app dashboard with room tabs, device tiles with on/off switches, a thermostat stepper, a door lock, today's energy usage and one-tap scenes.

Bootstrap 6 Mobile Dashboards

Sales Dashboard for Store Owners

Sales dashboard app screen for store owners with today, 7 and 30 day revenue, a tappable revenue chart, orders and visitors cards, top products and recent orders.

Bootstrap 6 Mobile Dashboards

Grocery App Product List with Cart Badge

Grocery app product list screen with filter chips, a two-column product grid with add-to-cart steppers and a floating cart button showing the item count and total.

Bootstrap 5 Mobile Shop & Checkout

Social Profile Screen with Photo Grid

Social media profile screen with avatar, bio, follower stats, Follow and Message buttons, posts, reels and tagged tabs and a three-column photo grid.

Tailwind CSS Mobile Profile Screens

Freelancer Profile with Reviews

Freelancer profile screen with cover photo, rating, skills chips, portfolio thumbnails, reviews with rating breakdown and a sticky Hire button that opens a hire request form.

Bootstrap 5 Mobile Profile Screens

Food Delivery App Home Screen

Food delivery app home screen with address picker sheet, search, category chips, promo banner, popular restaurant cards with ratings and a bottom tab bar.

Tailwind CSS Mobile Home & Feed

Passwordless Magic Link Login

Passwordless magic link login screen for mobile apps: email-only sign in that switches to a check-your-inbox state with an open mail app button and resend countdown.

Pure CSS Mobile Login & Sign Up

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

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

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

Social Login Buttons

Dark Tailwind CSS social login buttons for Google, Apple and GitHub with full-width and icon-only variants and a loading spinner state.

Tailwind CSS Social Buttons

Scroll-Snap Carousel

Native CSS scroll-snap carousel with arrow buttons, synced pill dots and keyboard support, enhanced by a few lines of vanilla JavaScript.

Pure CSS Carousels

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.