Split Hero with Image and Trust Stats
Two-column split hero for consulting and agency sites with a headline, two buttons, three trust stats and a tall team photo, built from core Gutenberg blocks.
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 410 componentsLatest components
Before and After Image Slider for Shopify
Drag-to-compare before and after image slider for Shopify with vertical or horizontal divider, touch and keyboard control, and optional side text.
Navbar with Overflow Menu (NavOverflow)
Bootstrap 6 news navbar built on the new NavOverflow component: links that do not fit move into a More menu automatically as the width shrinks.
Centered Logo Navbar
Elegant Bootstrap 6 navbar with links split around a centered logo, a pill call-to-action button and a Drawer menu on mobile.
Transparent Navbar over Hero Image
Bootstrap 6 transparent navbar over a full-height photo hero that turns into a solid, translucent white bar when the page scrolls.
Navbar with Search and User Menu
Dark Bootstrap 6 app navbar with a search field, notification bell with unread badge and an avatar user Menu, collapsing into a Drawer on mobile.
Responsive Navbar with Dropdown Menu
Bootstrap 6 responsive navbar with logo, Menu dropdowns with icons and descriptions, CTA buttons and a Drawer for mobile navigation.
Sneaker Store Home with Filters Sheet
Sneaker store app home screen with brand chips, search, product cards and a filter bottom sheet with price range, sizes and sort that applies to the product grid.
Fitness Profile with Achievements
Fitness app profile screen with avatar and level progress ring, weekly activity bars, an achievements badge grid with a details bottom sheet and personal records list.
Coffee Shop Order Customization Screen
Coffee shop app order screen where customers customize a drink: size cards, milk and syrup options, an extra shot stepper and a live price on the add to order button.
Fashion Store Product Detail Screen
Fashion store product detail screen with swipeable photos, colour swatches, size chips with a size guide bottom sheet, details accordion and a sticky Add to bag bar.
News Reader App Home
News reader app home screen with section tabs, a top story card, article list with thumbnails and read time, bookmark toggles, a saved view and a bottom tab bar.
Most copied
Responsive Navbar with Hamburger Menu
Accessible pure CSS navbar that collapses into a hamburger menu on small screens.
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
Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.
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.
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.
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.
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.