Elements library
Drop-in elements for any app.
Buttons, cards, inputs, toggles and loaders in their original designs — apply any palette in a click, then copy one or let the agent drop it straight into your app.
What this is
A free UI component library, that drops into your build
Not a screenshot gallery and not a package you have to install — real, running components you can preview, recolour, copy, or hand to the agent mid-build.
The elements library is a catalogue of 3,794 small user-interface components, gathered from the open-source Uiverse community and served here so you can use them without hunting through half a dozen codepens. They are the pieces an interface is actually made of: the button someone clicks, the card a product sits in, the spinner that covers a slow request, the toggle in a settings panel, the field where a person types their email.
Every element in the gallery below is rendering for real on this page. What you see is the element itself — its own markup, its own CSS, its own animation — not a picture of it. Each one arrives as plain HTML and a scoped stylesheet, so it works in a Next.js app, a plain static page, a Rails view or anything else that serves HTML. There is no runtime to install, no component framework to adopt, and nothing that has to match your build tooling.
In practice people use the library two ways. The first is manual: find something you like, preview it against a light or dark background, recolour it onto the palette you are using, and copy the markup straight into your codebase. The second is conversational — while the agent is building your app, hand it the element — copy it here and paste it into the chat — and it is placed in the right component and wired to your real data. It is the same trade the backend makes with its bricks: a piece someone already got right, inserted rather than re-derived. The same catalogue backs both, alongside the templates and palettes libraries that decide how the rest of the app looks.
<style> block, pasted into a file you own — so changing it afterwards is just editing your own source, and the author’s credit comes along at the top of the stylesheet.The library
3,794 drop-in elements
Buttons, cards, inputs, toggles, loaders and more, in their original designs. Apply any palette in a click (or let the agent do it), then copy it or drop it straight into your app. Sits alongside the templates library.
Elements imported from the open-source Uiverse library (MIT) — each credits its original author. Colours remapped to our palette.
What's inside
11 categories of UI components
The catalogue is grouped by what a component does, not by who made it. Here is what each category is good for, and how many elements it holds today.
Buttons
The largest category by far — flat, outlined, glassy, neumorphic and 3D buttons, most with a hover or press animation built in. Good for a primary call to action, a toolbar, or the one control on a landing page that has to feel expensive.
Cards
Profile cards, pricing cards, product tiles, flip cards and hover-reveal surfaces. Cards are the workhorse of dashboards, marketing grids and listing pages — pick one and repeat it across your data.
Loaders
Spinners, progress bars, skeleton shimmers and playful pure-CSS animations for the seconds your app spends waiting. Most are keyframe-only, so they cost nothing at runtime and never block a render.
Toggle switches
On/off switches, theme togglers and animated state controls. Reach for these in settings panels, feature flags and anywhere a checkbox would feel too clerical.
Inputs
Text fields, search bars, floating-label inputs and animated focus states. The fastest way to make a plain form feel considered without redesigning the whole page.
Forms
Whole assembled form blocks — sign-in panels, sign-up cards, contact and subscribe forms — with their fields, labels and buttons already styled as one piece.
Checkboxes
Animated ticks, morphing boxes and custom-drawn check marks. Useful for task lists, filter panels and consent rows where the default browser control looks out of place.
Patterns
Background textures and decorative surfaces — grids, dots, gradients and animated fields you can lay behind a hero or a section band.
Radio buttons
Single-choice controls: segmented pickers, animated dots and card-style option groups for plan selectors, quizzes and settings.
Tooltips
Hover hints and small pop-overs in CSS. Handy for icon-only toolbars and any control whose meaning is not obvious from its glyph alone.
Notifications
Toasts, alert bars and status messages — the smallest category, but the one that decides how your app feels when something goes wrong.
Getting one in
How to add an element to your app
Copy it by hand, ask the agent for it mid-build, or pull it as JSON from the library API. All three give you the same markup and CSS.
Find it and preview it
Pick a category tab, or search by name, tag or author. Flip the preview background between light and dark so you know the element still reads on the surface you actually use it on.
Recolour it, if you want
Choose a palette from the selector and the loaded elements are remapped onto it live. Leave it on “Original colours” to take the element exactly as its author designed it.
Copy the markup and styles
The Copy button puts the element’s HTML and a matching
<style>block on your clipboard — whatever colours you are currently previewing. Paste it into a component, a template, or a plain HTML file.Or just ask for it in a build
Inside a project, tell the agent which element you want. It places the component in the right file, recolours it to the project palette and wires it to your data instead of the placeholder text.
The library is also an API
All three libraries are queryable as JSON, which is how the app and the agent pick building blocks. Search across them, or fetch one item by id:
A single element comes back with its name, category, author, tags, HTML and CSS — already recoloured if you passed a palette.
Safe to paste next to your own CSS
- Every rule is scoped to the element, so nothing leaks into the rest of your page
- Keyframe names are made unique on import — two animated elements never fight
- Tailwind-authored elements are compiled to static CSS, so no Tailwind runtime is needed
- Plain HTML and CSS — usable in any framework, or none at all
Colour
How elements adapt to your palette
A community element arrives in its author's colours. One selector remaps it onto yours — in the preview, in what you copy, and in what the agent writes into your project.
Originals are preserved
Nothing is recoloured on import. The catalogue stores each element exactly as its author published it, and recolouring is a transform applied on demand — so the original is always one click away.
Colours are remapped, not overwritten
Coloured values are re-hued to the palette’s accents while keeping their original lightness, so a darker hover state stays darker than its base. Neutrals are mapped onto the palette’s own neutral ramp. The design keeps its structure — it just changes key.
Check it on both backgrounds
A lot of community elements are designed against a dark stage and quietly disappear on white. The light/dark toggle above the grid exists for that — flip it before you commit to anything with a glow or a soft shadow.
Palettes live in their own library — browse and edit every colour system, then reuse the same one across your elements, your template and your app.
Which library
Elements, templates and palettes — what's the difference?
Three libraries, three scopes. Most builds use all three: a template for the system, a palette for the colours, elements for the details.
Elements — one component
The smallest unit: a single button, card, loader or switch, community-made and community-credited. Use them to add character to a page that already exists. They do not decide your typography, your spacing or your layout.
You are hereTemplates — a whole design system
Each template is a complete system — palette, type, radius and component rules — with starter code behind it. Start a build on one and every page you add inherits the same rules, instead of you re-deciding them per screen.
Browse templatesPalettes — the colours
Ready-made colour systems, light and dark, grouped by mood. Open one to tweak every colour live and copy the CSS variables — or apply it to the elements on this page and see them change immediately.
Browse palettesNew to how the build itself works? The docs walk through both routes in — describing an app from scratch, or connecting an existing repo — and the platform and capabilities pages cover what ships around your UI: database, auth, email, payments and deploys.
Credit where it's due
Attribution and licensing for community-made elements
We did not design these. 1,046 community authors did, and every element carries their name.
The catalogue is imported from Uiverse, an open-source community library of UI components, published under the MIT License. The import keeps the author handle attached to each element, and the gallery prints it on every card — the small @handle under the element name is the person who designed it. The full licence text is bundled with the library and served at /elements/LICENSE.txt.
What that means for you, in plain terms: MIT is one of the most permissive licences there is. You can use these elements in personal and commercial work, modify them, and ship them inside a product you charge for. The one thing the licence asks is that the copyright notice and licence text travel with the copies — so keep the licence file in your project, and do not strip the credit out of your source when you paste an element in.
Our role here is plumbing, not design. On import each element is normalised so it behaves predictably next to other people’s code: the CSS is scoped to that element, keyframe names are made unique so two animations can share a page, and elements that were written with Tailwind utilities are compiled down to static CSS. Colours are left exactly as published; recolouring only ever happens on demand when you pick a palette. Nothing about the design itself is ours, and the page never pretends otherwise.
If you are an author and want an element changed or removed, get in touch and we will act on it.
Finding things
Browsing and filtering the library
A few thousand components is a lot to scroll. These are the shortcuts that make it feel small.
Start from a category, not the search box
The category tabs carry live counts, so you always know how big the pool is before you commit to scrolling it. Each category loads in pages — hit “Load more” to pull the next batch, and the button tells you how many of the total you have seen.
Search matches names, tags and authors
Type a style rather than a noun — neumorphism, glassmorphism, gradient, 3d, minimalist — and you will find whole families of matching components. Author handles work too, so when you find a designer whose taste matches yours, search their name to see the rest of their work.
Search narrows what is loaded
Filtering runs over the elements already loaded in the current category, so if a query comes back thin, load another page and try again. Starred cards are featured picks — a useful place to start when a category is very large.
Judge it in context, not in the grid
Cards preview elements at a slightly reduced scale on a neutral stage. Before you settle on something animated, look at it against your palette and your background — and remember that a loader you will see for two seconds deserves less deliberation than the button on your pricing page.
FAQ
Common questions about the elements library
Any of these, in your app tonight
Pick an element, say the word, and the agent drops it in — recoloured to your palette, wired to your code.