Copy-paste UI components

Free HTML, CSS and JavaScript components for Bootstrap 5, Tailwind CSS and pure CSS. Preview live, copy the code, ship faster.

Bootstrap 5 Tailwind CSS Pure CSS

Browse by category

All 225 components

Latest components

Newsletter Email with Featured Articles

Email-safe editorial newsletter with masthead, featured story, two-column article grid that stacks on mobile, quick links, sponsor slot and footer.

Pure CSS Email Templates

Custom Cursor Follower

Smooth custom cursor with a dot and an eased ring that grows on links, shows a label over cards and inverts the headline, in CSS and vanilla JS.

Pure CSS Cursor Effects

CSS Pattern Backgrounds

Eight pure CSS gradient background patterns (dots, polka, grid, graph paper, stripes, crosshatch, checkerboard, zigzag) with a live scale slider.

Pure CSS Backgrounds

Link Underline Effects

Six animated link underline styles in pure CSS (slide, center, highlighter, ink fill, line swap and wave) that also work on links that wrap.

Pure CSS Hover Effects

Glitch Text Effect

Pure CSS glitch heading with sliced cyan and magenta copies, CRT scanlines, and subtle, hover-only and acid palette variants.

Pure CSS Text Effects

Welcome Email

Email-safe welcome email template with logo header, hero photo, three getting-started steps, a bulletproof button, help line and footer.

Pure CSS Email Templates

World Clock Widget

Tailwind CSS world clock with live digital times for six cities, day and night cards, time differences, a 12h/24h switch and the Intl API.

Tailwind CSS Clocks

Shimmer Skeleton

Dark pure CSS skeleton screen for a profile card, article and comment list, with one synchronized shimmer sweep across every placeholder.

Pure CSS Skeleton Loaders

Bouncing Dots Loader

Pure CSS three-dot loaders: bounce, pulse with rings, chat typing indicator and a button loading state, all driven by custom properties.

Pure CSS Loaders & Spinners

Upload Progress List

Dark Tailwind CSS upload list with per-file progress bars, speed and time left, pause, resume, retry and remove actions, a queue and total progress.

Tailwind CSS Progress Bars

Toast with Progress Bar

Stacked toast notifications with a CSS countdown progress bar that pauses on hover or focus and closes the toast when it runs out.

Pure CSS Toasts

Custom Range Slider

Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.

Pure CSS Range Sliders

Most copied

Launch Countdown Card

Bootstrap 5 countdown card for product launches with a reminder button.

Bootstrap 5 Countdown Timers

Sortable Data Table

Tailwind CSS data table with clickable column headers that sort text, dates and numbers, with aria-sort, arrow indicators and a responsive scroll wrapper.

Tailwind CSS Tables

Forgot Password Form

Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.

Tailwind CSS Login & Sign Up

Settings Toggles with Description

Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.

Tailwind CSS Toggles & Switches

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.