Free HTML & CSS UI Components

284 free UI components: alerts, toasts, cards, modals, tabs, accordions, pricing tables, footers and more, written in plain HTML and CSS. Open index.html and it works: no jQuery, no build step, no CDN calls. Each one drops into a Bootstrap 4, 5 or 6 project unchanged, or runs with no framework at all.

⭐ If these save you time, star this repo. It's how other developers find them.

Live previews of every template, plus more options from other designers: the full collection on Colorlib.

Contents

• Alerts (12)
• Toasts (12)
• Progress bars (12)
• Pagination (10)
• Breadcrumbs (10)
• Tabs (12)
• Accordions (20)
• Buttons (20)
• Modals (20)
• Checkboxes and toggles (20)
• Multiselects (20)
• Cards (20)
• Hero sections (12)
• Pricing tables (12)
• Shopping carts (12)
• Calendars (20)
• Carousels (20)
• Footers (20)

Alerts

Alert 01 Demo · Code · Details	Alert 02 Demo · Code · Details	Alert 03 Demo · Code · Details
Alert 04 Demo · Code · Details	Alert 05 Demo · Code · Details	Alert 06 Demo · Code · Details
Alert 07 Demo · Code · Details	Alert 08 Demo · Code · Details	Alert 09 Demo · Code · Details
Alert 10 Demo · Code · Details	Alert 11 Demo · Code · Details	Alert 12 Demo · Code · Details

Toasts

Toast 01 Demo · Code · Details	Toast 02 Demo · Code · Details	Toast 03 Demo · Code · Details
Toast 04 Demo · Code · Details	Toast 05 Demo · Code · Details	Toast 06 Demo · Code · Details
Toast 07 Demo · Code · Details	Toast 08 Demo · Code · Details	Toast 09 Demo · Code · Details
Toast 10 Demo · Code · Details	Toast 11 Demo · Code · Details	Toast 12 Demo · Code · Details

Progress bars

Progress Bar 01 Demo · Code · Details	Progress Bar 02 Demo · Code · Details	Progress Bar 03 Demo · Code · Details
Progress Bar 04 Demo · Code · Details	Progress Bar 05 Demo · Code · Details	Progress Bar 06 Demo · Code · Details
Progress Bar 07 Demo · Code · Details	Progress Bar 08 Demo · Code · Details	Progress Bar 09 Demo · Code · Details
Progress Bar 10 Demo · Code · Details	Progress Bar 11 Demo · Code · Details	Progress Bar 12 Demo · Code · Details

Pagination

Pagination 01 Demo · Code · Details	Pagination 02 Demo · Code · Details	Pagination 03 Demo · Code · Details
Pagination 04 Demo · Code · Details	Pagination 05 Demo · Code · Details	Pagination 06 Demo · Code · Details
Pagination 07 Demo · Code · Details	Pagination 08 Demo · Code · Details	Pagination 09 Demo · Code · Details
Pagination 10 Demo · Code · Details

Breadcrumbs

Breadcrumb 01 Demo · Code · Details	Breadcrumb 02 Demo · Code · Details	Breadcrumb 03 Demo · Code · Details
Breadcrumb 04 Demo · Code · Details	Breadcrumb 05 Demo · Code · Details	Breadcrumb 06 Demo · Code · Details
Breadcrumb 07 Demo · Code · Details	Breadcrumb 08 Demo · Code · Details	Breadcrumb 09 Demo · Code · Details
Breadcrumb 10 Demo · Code · Details

Tabs

Tabs 01 Demo · Code · Details	Tabs 02 Demo · Code · Details	Tabs 03 Demo · Code · Details
Tabs 04 Demo · Code · Details	Tabs 05 Demo · Code · Details	Tabs 06 Demo · Code · Details
Tabs 07 Demo · Code · Details	Tabs 08 Demo · Code · Details	Tabs 09 Demo · Code · Details
Tabs 10 Demo · Code · Details	Tabs 11 Demo · Code · Details	Tabs 12 Demo · Code · Details

Accordions

Accordion 01 Demo · Code · Details	Accordion 02 Demo · Code · Details	Accordion 03 Demo · Code · Details
Accordion 04 Demo · Code · Details	Accordion 05 Demo · Code · Details	Accordion 06 Demo · Code · Details
Accordion 07 Demo · Code · Details	Accordion 08 Demo · Code · Details	Accordion 09 Demo · Code · Details
Accordion 10 Demo · Code · Details	Accordion 11 Demo · Code · Details	Accordion 12 Demo · Code · Details
Accordion 13 Demo · Code · Details	Accordion 14 Demo · Code · Details	Accordion 15 Demo · Code · Details
Accordion 16 Demo · Code · Details	Accordion 17 Demo · Code · Details	Accordion 18 Demo · Code · Details
Accordion 19 Demo · Code · Details	Accordion 20 Demo · Code · Details

Buttons

Buttons 01 Demo · Code · Details	Buttons 02 Demo · Code · Details	Buttons 03 Demo · Code · Details
Buttons 04 Demo · Code · Details	Buttons 05 Demo · Code · Details	Buttons 06 Demo · Code · Details
Buttons 07 Demo · Code · Details	Buttons 08 Demo · Code · Details	Buttons 09 Demo · Code · Details
Buttons 10 Demo · Code · Details	Buttons 11 Demo · Code · Details	Buttons 12 Demo · Code · Details
Buttons 13 Demo · Code · Details	Buttons 14 Demo · Code · Details	Buttons 15 Demo · Code · Details
Buttons 16 Demo · Code · Details	Buttons 17 Demo · Code · Details	Buttons 18 Demo · Code · Details
Buttons 19 Demo · Code · Details	Buttons 20 Demo · Code · Details

Modals

Modal 01 Demo · Code · Details	Modal 02 Demo · Code · Details	Modal 03 Demo · Code · Details
Modal 04 Demo · Code · Details	Modal 05 Demo · Code · Details	Modal 06 Demo · Code · Details
Modal 07 Demo · Code · Details	Modal 08 Demo · Code · Details	Modal 09 Demo · Code · Details
Modal 10 Demo · Code · Details	Modal 11 Demo · Code · Details	Modal 12 Demo · Code · Details
Modal 13 Demo · Code · Details	Modal 14 Demo · Code · Details	Modal 15 Demo · Code · Details
Modal 16 Demo · Code · Details	Modal 17 Demo · Code · Details	Modal 18 Demo · Code · Details
Modal 19 Demo · Code · Details	Modal 20 Demo · Code · Details

Checkboxes and toggles

Checkbox 01 Demo · Code · Details	Checkbox 02 Demo · Code · Details	Checkbox 03 Demo · Code · Details
Checkbox 04 Demo · Code · Details	Checkbox 05 Demo · Code · Details	Checkbox 06 Demo · Code · Details
Checkbox 07 Demo · Code · Details	Checkbox 08 Demo · Code · Details	Checkbox 09 Demo · Code · Details
Checkbox 10 Demo · Code · Details	Checkbox 11 Demo · Code · Details	Checkbox 12 Demo · Code · Details
Checkbox 13 Demo · Code · Details	Checkbox 14 Demo · Code · Details	Checkbox 15 Demo · Code · Details
Checkbox 16 Demo · Code · Details	Checkbox 17 Demo · Code · Details	Checkbox 18 Demo · Code · Details
Checkbox 19 Demo · Code · Details	Checkbox 20 Demo · Code · Details

Multiselects

Multiselect 01 Demo · Code · Details	Multiselect 02 Demo · Code · Details	Multiselect 03 Demo · Code · Details
Multiselect 04 Demo · Code · Details	Multiselect 05 Demo · Code · Details	Multiselect 06 Demo · Code · Details
Multiselect 07 Demo · Code · Details	Multiselect 08 Demo · Code · Details	Multiselect 09 Demo · Code · Details
Multiselect 10 Demo · Code · Details	Multiselect 11 Demo · Code · Details	Multiselect 12 Demo · Code · Details
Multiselect 13 Demo · Code · Details	Multiselect 14 Demo · Code · Details	Multiselect 15 Demo · Code · Details
Multiselect 16 Demo · Code · Details	Multiselect 17 Demo · Code · Details	Multiselect 18 Demo · Code · Details
Multiselect 19 Demo · Code · Details	Multiselect 20 Demo · Code · Details

Cards

Card 01 Demo · Code · Details	Card 02 Demo · Code · Details	Card 03 Demo · Code · Details
Card 04 Demo · Code · Details	Card 05 Demo · Code · Details	Card 06 Demo · Code · Details
Card 07 Demo · Code · Details	Card 08 Demo · Code · Details	Card 09 Demo · Code · Details
Card 10 Demo · Code · Details	Card 11 Demo · Code · Details	Card 12 Demo · Code · Details
Card 13 Demo · Code · Details	Card 14 Demo · Code · Details	Card 15 Demo · Code · Details
Card 16 Demo · Code · Details	Card 17 Demo · Code · Details	Card 18 Demo · Code · Details
Card 19 Demo · Code · Details	Card 20 Demo · Code · Details

Hero sections

Hero 01 Demo · Code · Details	Hero 02 Demo · Code · Details	Hero 03 Demo · Code · Details
Hero 04 Demo · Code · Details	Hero 05 Demo · Code · Details	Hero 06 Demo · Code · Details
Hero 07 Demo · Code · Details	Hero 08 Demo · Code · Details	Hero 09 Demo · Code · Details
Hero 10 Demo · Code · Details	Hero 11 Demo · Code · Details	Hero 12 Demo · Code · Details

Pricing tables

Pricing Table 01 Demo · Code · Details	Pricing Table 02 Demo · Code · Details	Pricing Table 03 Demo · Code · Details
Pricing Table 04 Demo · Code · Details	Pricing Table 05 Demo · Code · Details	Pricing Table 06 Demo · Code · Details
Pricing Table 07 Demo · Code · Details	Pricing Table 08 Demo · Code · Details	Pricing Table 09 Demo · Code · Details
Pricing Table 10 Demo · Code · Details	Pricing Table 11 Demo · Code · Details	Pricing Table 12 Demo · Code · Details

Shopping carts

Shopping Cart 01 Demo · Code · Details	Shopping Cart 02 Demo · Code · Details	Shopping Cart 03 Demo · Code · Details
Shopping Cart 04 Demo · Code · Details	Shopping Cart 05 Demo · Code · Details	Shopping Cart 06 Demo · Code · Details
Shopping Cart 07 Demo · Code · Details	Shopping Cart 08 Demo · Code · Details	Shopping Cart 09 Demo · Code · Details
Shopping Cart 10 Demo · Code · Details	Shopping Cart 11 Demo · Code · Details	Shopping Cart 12 Demo · Code · Details

Calendars

Calendar 01 Demo · Code · Details	Calendar 02 Demo · Code · Details	Calendar 03 Demo · Code · Details
Calendar 04 Demo · Code · Details	Calendar 05 Demo · Code · Details	Calendar 06 Demo · Code · Details
Calendar 07 Demo · Code · Details	Calendar 08 Demo · Code · Details	Calendar 09 Demo · Code · Details
Calendar 10 Demo · Code · Details	Calendar 11 Demo · Code · Details	Calendar 12 Demo · Code · Details
Calendar 13 Demo · Code · Details	Calendar 14 Demo · Code · Details	Calendar 15 Demo · Code · Details
Calendar 16 Demo · Code · Details	Calendar 17 Demo · Code · Details	Calendar 18 Demo · Code · Details
Calendar 19 Demo · Code · Details	Calendar 20 Demo · Code · Details

Carousels

Carousel 01 Demo · Code · Details	Carousel 02 Demo · Code · Details	Carousel 03 Demo · Code · Details
Carousel 04 Demo · Code · Details	Carousel 05 Demo · Code · Details	Carousel 06 Demo · Code · Details
Carousel 07 Demo · Code · Details	Carousel 08 Demo · Code · Details	Carousel 09 Demo · Code · Details
Carousel 10 Demo · Code · Details	Carousel 11 Demo · Code · Details	Carousel 12 Demo · Code · Details
Carousel 13 Demo · Code · Details	Carousel 14 Demo · Code · Details	Carousel 15 Demo · Code · Details
Carousel 16 Demo · Code · Details	Carousel 17 Demo · Code · Details	Carousel 18 Demo · Code · Details
Carousel 19 Demo · Code · Details	Carousel 20 Demo · Code · Details

Footers

Footer 01 Demo · Code · Details	Footer 02 Demo · Code · Details	Footer 03 Demo · Code · Details
Footer 04 Demo · Code · Details	Footer 05 Demo · Code · Details	Footer 06 Demo · Code · Details
Footer 07 Demo · Code · Details	Footer 08 Demo · Code · Details	Footer 09 Demo · Code · Details
Footer 10 Demo · Code · Details	Footer 11 Demo · Code · Details	Footer 12 Demo · Code · Details
Footer 13 Demo · Code · Details	Footer 14 Demo · Code · Details	Footer 15 Demo · Code · Details
Footer 16 Demo · Code · Details	Footer 17 Demo · Code · Details	Footer 18 Demo · Code · Details
Footer 19 Demo · Code · Details	Footer 20 Demo · Code · Details

How to use one

1. Clone the repo, or download it as a ZIP from the green Code button.
2. Copy the folder of the template you want into your project.
3. Open its index.html in a browser. Every folder is self-contained: css/style.css, a small js/snippet.js where the template needs behaviour, plus its own fonts and images.

Using Bootstrap already? Load the template's css/style.css after your framework stylesheet. Class names are namespaced per template, so they won't collide with yours.

License

Free for personal and commercial use, including client work. Attribution is appreciated but not required. Photography, where present, is licensed for use inside these templates. See LICENSE.md.

More free templates from Colorlib

• Free HTML & CSS Login Form Templates
• Free HTML & CSS Registration Form Templates
• Free Coming Soon & Under Construction Page Templates
• Free HTML & CSS Contact Form Templates
• Free 404 & Error Page Templates
• Free Multi-Step Form & Form Wizard Templates
• Free Booking & Appointment Form Templates
• Free HTML & CSS Search Form Templates
• Free Navigation Menu, Sidebar & Dropdown Templates
• Free HTML & CSS Table Templates
• Free HTML Form Templates: Job Application, Survey & Newsletter

Building an admin panel or a web app?

• Gentelella and Adminator: free admin dashboard templates
• DashboardPack: premium dashboards for React, Vue, Angular, Next.js, Laravel and plain HTML

Made by Colorlib.