Copy-paste UI components

A Shopify section with a progress bar showing how far the cart is from free shipping, kept in sync with cart changes, with empty, below and reached messages.

Shopify Shopping Carts

Edit Profile Screen with Avatar Picker

Edit profile screen for mobile apps with an avatar picker bottom sheet, username availability check, bio character counter, validation and a sticky save button.

Bootstrap 6 Mobile Profile Screens

Music Streaming App Home Screen

Music streaming app home screen in dark mode with greeting, recently played grid, made for you playlist row, mini player above the tab bar and a full player bottom sheet.

Bootstrap 6 Mobile Home & Feed

Travel App Explore Screen

Travel app explore screen with destination search, category chips, featured destination cards in a horizontal scroll, nearby list, bottom sheet details and bottom tab bar.

Bootstrap 6 Mobile Home & Feed

Food Delivery App Phone Login

Food delivery app phone login screen with searchable country code picker, SMS code step and continue as guest: a mobile phone number sign-in UI with a food photo header.

Bootstrap 6 Mobile Login & Sign Up

Language Learning App Onboarding

Language learning app onboarding screen with flag language picker, level choice, daily goal and progress bar: a three-step mobile app onboarding flow with swipe support.

Bootstrap 6 Onboarding Screens

OTP Verification Screen with Code Inputs

OTP verification screen with six one-digit code inputs, auto advance, paste and one-time-code autofill, a resend timer and an edit phone number sheet.

Bootstrap 5 Mobile Login & Sign Up

News App Topic Picker Onboarding

News app topic picker onboarding screen: follow topics as chips with follower counts, search them and continue once three interests are selected.

Tailwind CSS Onboarding Screens

Meditation App Onboarding with Goals

Meditation app onboarding screen where users pick goals as selectable cards, set a daily reminder time and days, then see their plan, with a step counter.

Pure CSS Onboarding Screens

Banking App Welcome and Permissions

Banking app welcome screen with a notifications and Face ID permission flow, clear explanations, Allow and Not now buttons and a setup summary.

Bootstrap 5 Onboarding Screens

Fitness App Onboarding Screens

Fitness app onboarding screens with three swipeable steps, SVG illustrations, progress dots, Skip and Get started, built as a mobile app intro walkthrough.

Tailwind CSS Onboarding Screens

Product Comparison Table Section for Shopify

Shopify section with a real comparison table for 2 to 4 products: live prices, yes/no icons, row values set in the theme editor, and a sticky first column when it scrolls on phones.

Shopify Tables

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