Free UI Library · 60 templates
Templates you can copy, paste and learn from
3D scenes, gradients, backgrounds, sections and components. Each one has a live preview, the complete code, the AI prompt that builds it and a step-by-step explanation.
Built with
- HTML
- CSS
- JavaScript
- Canvas
- Three.js
- 60Free templates
- 12Interactive 3D scenes
- 5Categories
- FreeNo sign-up
How it works
See it, copy it, make it yours
Pick a template
Browse by type, filter by light or dark, and open any template to see it running live.
Copy the code
Every template is plain HTML, CSS and JavaScript you can paste into any project in one click.
Or use the prompt
Paste the included prompt into Claude, ChatGPT, Cursor or v0 to rebuild it in your own stack and style.
Featured 3D scene
3D Carousel Ring
Eight panels arranged in a circle in 3D space, rotating like a carousel. The radius is calculated with trigonometry so the panels meet edge to edge.
html { overflow: hidden; }
body {
min-height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
background: radial-gradient(circle at 50% 30%, #1a2350 0%, #060816 70%);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.stage {
width: 170px;
height: 220px;
perspective: 1100px;
}
.ring {
--count: 8;
--radius: 235px; /* (panel width / 2) / tan(180deg / count) + a small gap */
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animat- Pure CSS 3D
- Live preview
The library
Find a template to use today
Every preview below is running live. Pick a type, then open any card for the code and the prompt.
Showing 60 of 60 templates
Questions
Good to know before you copy
Are these UI templates free?
Yes. Every template is free to copy and use in personal projects and client work. There is no sign-up and nothing to install.
Do I need React or another framework?
No. Each template is plain HTML, CSS and JavaScript, so it works anywhere. To use one inside React, Next.js or Vue, paste the included AI prompt into your coding tool and ask for a component in that framework.
How are the 3D scenes built?
Three ways: CSS 3D transforms with perspective, 3D maths drawn on a canvas, and WebGL with Three.js loaded from a CDN. None of them needs a build step, and each page explains how the effect works.
What is the AI prompt on each template for?
It describes the template in enough detail for an AI tool to rebuild it. Use it when you want the same idea in a different style, colour palette or tech stack.
Will the templates work on phones?
Sections and components are responsive. Each template page has desktop, tablet and phone preview sizes so you can check before you copy.