Component library

200 HTML & CSS components, ready to drop on a page

The openconstructor library is a set of hand-made components written in plain HTML and CSS — no framework, no build step. Click one to place it on the free-form canvas, restyle it, ask the AI to change it, and export the result.

Open the editor →

The 12 sections

AI & Chat

Chat app, chat bubbles, prompt composer, model selector, thinking indicator, streaming reply, agent steps, answer with sources, voice orb, token usage meter and more — 19 in all.

Buttons

17 styles: primary, outline, ghost, gradient, shimmer, border beam, glass, loading, destructive, split button, button group and a copy button.

Forms & Inputs

Search, text field, switch, checkbox, select, slider, file upload, radio cards, segmented control, tags input, star rating, date field and a contact form.

Navigation

Navbar, tabs, breadcrumbs, pagination, steps, dropdown menu, sidebar nav, mobile tab bar, command palette, mega menu and app top bar.

Cards

Card, profile, review, avatars, Kanban card and a spotlight card.

Data & Dashboard

Table, metric, progress ring, calendar, line and donut charts, activity heatmap, KPI sparklines, leaderboard and a full dashboard shell.

Feedback & Overlays

Toast, tooltip, modal dialog, notification bell, skeleton, loading dots, empty state, cookie banner, announcement bar and upload queue.

Auth

Sign-in form, sign-up card, social sign-in, SMS code, two-factor screen, password strength and forgot password.

Pricing & Commerce

Pricing table, pricing toggle, plan picker, product card and grid, cart drawer, checkout summary, coupon field, order tracker and invoice.

Landing sections

Hero, features, bento grid, testimonials, logo cloud, FAQ, call to action, team, blog cards, changelog, newsletter signup, 404 page and footer.

Content & Media

Accordion, code block, video and audio players, image gallery, social post, comment thread, music card, article layout and pull quote.

Effects

Soft glow, gradient orb, pulsing dot, marquee, fading grid, gradient border, animated gradient text, orbit rings and noise gradient.

How to use them

Browse with live previews. Hover a card in the side panel to see it animate; type in the search box to find anything across all sections.
Place freely. The canvas is free-form: drag elements anywhere, pan and zoom, and set the page background in the background editor.
Edit the code. Right-click any element to view and change its HTML and CSS, or add your own snippet with + custom code.
Change with AI. Select an element and describe the change, or use ⚗ Fusion to give one component the style of another. See the AI guide.

Export anywhere

A page built from these components exports as standalone HTML, as a React, Vue or Svelte component, or — for games — as a Roblox Luau script or a LÖVE 2D main.lua.

FAQ

Are the components free for commercial use?

Yes. You can use them in personal and commercial projects. The project is open source under the MIT license; a few components are adapted from other open-source libraries, credited in the repository.

Do the components depend on a framework?

No. Each one is plain HTML and CSS, so they work in any stack.

Can I add my own components?

Yes. Use “+ custom code” to paste any HTML and CSS; it becomes an element on the canvas like the built-in ones.

Ready to try it?

openconstructor is free, open source (MIT) and runs entirely in your browser. No sign-up is needed to build and export.