Copy-paste UI components

Shopify trust badges section with an icon row or card layout, ten built-in icons or custom images, and an optional line of your store's payment icons.

Shopify Feature Sections

Confirm Delete Dialog

Dark Bootstrap 6 Dialog that confirms deleting a file, with danger theme, focus on Cancel, per-row triggers, a loading state, row removal and an Undo toast.

Bootstrap 6 Modals

Dialog Modal with Form

Bootstrap 6 Dialog with a validated invite form: name, email, role select, note counter and switch, with cancel and save actions, loading state and success toast.

Bootstrap 6 Modals

Navbar with Offcanvas Drawer on Mobile

Responsive Bootstrap 6 navbar that shows inline links on desktop and moves them into a slide-in Drawer with icons, studio hours and social links on small screens.

Bootstrap 6 Navbars

Sticky Navbar with Scrollspy Links

Bootstrap 6 sticky navbar whose pill links highlight the section in view with ScrollSpy, with smooth scrolling, a reading progress line and a swipeable link row on mobile.

Bootstrap 6 Navbars

Dark Navbar with Mega Dropdown

Dark Bootstrap 6 navbar whose Products item opens a wide three-column mega menu with icons, descriptions and a featured card, collapsing into a Drawer on mobile.

Bootstrap 6 Navbars

App Settings Screen with Grouped Lists

App settings screen with an account card, grouped lists, notification switches, a theme select with dark mode, a language bottom sheet, privacy options, help links and sign out.

Tailwind CSS Mobile Settings

Mobile Shopping Bag Screen

Mobile shopping bag screen with quantity steppers, remove and undo, promo code validation, free delivery progress, order summary and a sticky checkout bar.

Pure CSS Mobile Shop & Checkout

Notification Preferences Screen

Mobile notification settings screen with push, email and SMS switches per category, a pause-all toggle, quiet hours with a time range and days, and a save bar with unsaved state.

Bootstrap 5 Mobile Settings

Messaging App Conversation List

Messaging app chat list screen with search, unread and group filters, pinned chats, online dots, message previews, unread counts and a new chat bottom sheet.

Tailwind CSS Mobile Chat & Messaging

Chat Thread with Attachments

Mobile chat thread screen with a contact header and call buttons, message bubbles grouped by day, image and file messages, a typing indicator and a composer with an attachment sheet.

Bootstrap 5 Mobile Chat & Messaging

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

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.