Live previewHTML UI Component Templates30 UI component sheets in plain HTML & CSS, free
30 UI component sheets in plain HTML and CSS, each one a single file: buttons, alerts progress and loaders, dialogs and drawers, advanced inputs, timelines and feeds, charts and meters, lists and kanban, file tree and file browser and more. Responsive, accessible and free for personal and commercial use.
- 30 component sheets: buttons, forms, badges, feedback, navigation, menus, dialogs, cards, table, advanced inputs
- Accessible patterns: menus, listbox, combobox, tabs, grid calendar and native dialogs with keyboard support
- One shared look: the same tokens, radius and focus ring on every component
- Designs
- 30
- Built with
- HTML & CSS
- Licence
- Free, commercial use
- Updated
- Oct 2026
- Free for client projects
- Plain HTML & CSS, no frameworks
- Responsive down to 390px
- Copy, paste and rebrand in minutes
What's inside: 30 designs
See all 30What's inside
All ui components templates 30 designs in this pack
Click any design to open its live preview, then check it at desktop, tablet and phone sizes.
Live preview
Live previewForm controls
Live previewBadges tags and avatars
Live previewAlerts progress and loaders
Live previewNavigation components
Live previewMenus tooltips and popovers
Live previewDialogs and drawers
Live previewCards
Live previewData table
Live previewAdvanced inputs
Live previewAccordions and disclosures
Live previewCarousels and sliders
Live previewTimelines and feeds
Live previewRatings and reviews
Live previewEmpty and status states
Live previewCharts and meters
Live previewCalendars and schedules
Live previewChat and messaging
Live previewLists and kanban
Live previewNotification centre and settings
Live previewCommand menu and shortcuts
Live previewFile tree and file browser
Live previewOnboarding checklist and tour
Live previewSliders and range pickers
Live previewColour and theme pickers
Live previewMedia players
Live previewCode blocks
Live previewComparison table
Live previewMap markers and location cards
Live previewConfirmations and undo
How to use
From download to live in three steps
- Download the packClick Download free above and the zip downloads straight away. Unzip it and open index.html to see every design.
- Copy the design inPaste its HTML into your page and its CSS into your stylesheet. Copy the small script too if it has one.
- Make it yoursChange the colour and font variables at the top of the CSS, then swap in your own text, links and images.
Reviews
Customer reviews
Only people who bought or downloaded it can leave a review, from their account page.
Reply from the maker
FAQ
Common questions
Can I use it for client work?
Yes. It's free for personal and commercial projects, including client sites. Just don't resell the pack itself.
Do I need Tailwind, Bootstrap or a build step?
No. Each design is plain HTML and CSS with a few lines of JavaScript where needed.
Can I copy a single component?
Yes. Each component sits in its own block with its CSS in the same file. Copy the markup and the rules that start with the sheet's class.
Are these accessible?
They follow common ARIA patterns with keyboard support, visible focus and live regions. Always test with your own content and users.
Are the charts accessible?
Each chart has a text label, and the bar chart can switch to a data table. Test with your own data and users.
Do the media players play real files?
The controls are UI only and run on a demo timer. Connect them to an audio or video element in a few lines.
What does the licence allow?
Use it on unlimited websites, your own and your clients', and change anything. You just can't resell or share the files themselves. See the licence.
Get HTML UI Component Templates
30 designs, free for personal and commercial projects.
More products
