HTML and CSS UI Component Generators

Search results

No tool matches that. Try a shorter word.

Cards

The card builder is the general case: image, heading, body, actions, with padding, radius, shadow and hover options. The blog, pricing, product and comparison cards start from layouts appropriate to their content — a date and read time, a price and feature list, a price and add-to-cart, a side-by-side of tiers. Hover card, flip card and expandable card add the interaction: a lift or reveal on hover, a 3D flip to a back face, a panel that expands on click. All of them are accessible by keyboard and respect reduced-motion preferences.

Sections

Feature grid arranges icon, title and description blocks in a responsive grid; team grid does the same with photos and roles. Hero section builds the top of a landing page — headline, subhead, call to action, optional image or gradient background — with alignment and spacing controls and a mobile layout that does not collapse.

Small pieces

Tooltip generates a CSS-only tooltip with position, arrow, delay and colour, and the ARIA attributes so screen readers announce it. Glass button produces a translucent frosted button with hover and active states. Autocomplete UI, search box and file upload UI provide the markup and styling for those inputs — the dropdown list, the icon and clear button, the drag-and-drop zone — with the JavaScript kept minimal and clearly separated so it can be wired to your own logic.

How the output is written

The generated code uses plain CSS custom properties for the colours and sizes so a component can be re-themed after pasting, class names are prefixed to avoid collisions, and there is no build step. Where a component has a JavaScript part, it is a few lines of vanilla code.

Nothing to sign up for

The builders run in your browser, and the state of a component is encoded in the URL where possible so it can be shared or bookmarked. Nothing is stored server-side.

Explore other categories