Skip to content

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 200 components
Navigation
23 component(s)
Page Sections
30 component(s)
Data Display
36 component(s)
Forms
27 component(s)
Buttons
12 component(s)
Feedback & Overlays
21 component(s)
E-commerce
19 component(s)
Page Templates
15 component(s)
Widgets
10 component(s)
Effects & Animations
7 component(s)

Latest components

Wave Section Dividers – Pure CSS shapes & dividers preview

Wave Section Dividers

Pure CSS and inline SVG section dividers with wave, layered wave, curve and tilt shapes that inherit the next section's color and stretch to any width.

Pure CSS Shapes & Dividers
Scroll Reveal Animations – Pure CSS scroll animations preview

Scroll Reveal Animations

Elements fade, slide, zoom or flip into view on scroll using IntersectionObserver and data-sr attributes, with stagger delays and reduced-motion support.

Pure CSS Scroll Animations
Animated Gradient Background – Pure CSS backgrounds preview

Animated Gradient Background

Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.

Pure CSS Backgrounds
Image Hover Effects – Pure CSS hover effects preview

Image Hover Effects

Six pure CSS image hover effects with captions: zoom, grayscale to color, sliding panel, tilt, blur and frame, also revealed by keyboard focus.

Pure CSS Hover Effects
Animated Gradient Text – Pure CSS text effects preview

Animated Gradient Text

Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.

Pure CSS Text Effects
Typing Text Effect – Pure CSS text effects preview

Typing Text Effect

Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.

Pure CSS Text Effects
Music Player Card – Pure CSS music players preview

Music Player Card

Dark music player card with a spinning vinyl cover, seek bar, play, skip, shuffle and repeat controls, volume slider and a clickable playlist.

Pure CSS Music Players
Weather Card with Forecast – Pure CSS weather widgets preview

Weather Card with Forecast

Sky-blue weather card with a CSS-drawn sun and clouds, current conditions, quick stats, a 5-day forecast with range bars and a Celsius/Fahrenheit switch.

Pure CSS Weather Widgets
Back to Top Button with Scroll Progress – Pure CSS back to top preview

Back to Top Button with Scroll Progress

Round back-to-top button with an SVG ring that fills as you scroll, a percentage label and smooth scrolling, for the page or any scroll container.

Pure CSS Back to Top
Live Analog Clock – Pure CSS clocks preview

Live Analog Clock

Live analog clock with CSS-rotated hands, conic-gradient ticks, a digital readout and optional time zone support, in pure CSS and vanilla JS.

Pure CSS Clocks
Maintenance Page with Animated Gears – Pure CSS maintenance pages preview

Maintenance Page with Animated Gears

Dark full-page scheduled maintenance notice with interlocking SVG gears, a live countdown, progress bar and task checklist in pure CSS and vanilla JS.

Pure CSS Maintenance Pages
Coupon Ticket – Pure CSS promo banners preview

Coupon Ticket

Ticket-style discount coupon with a striped stub, dashed perforation with notches and a copy code button with clipboard fallback and live feedback.

Pure CSS Promo Banners
Sortable Data Table – Tailwind CSS tables preview

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