Charcoal

Charcoal is a free HTML5 app UI kit for Bootstrap 4, offering a redesigned set of interface components and JavaScript widgets you can drop into a startup website or an Android/iOS app preview.

What is Charcoal?

Charcoal is a free app UI kit developed on the Bootstrap 4 framework (Beta) by Wired Dots and distributed through the ThemeWagon marketplace. Its core function is to provide a library of independently usable UI components, such as buttons, forms, dropdowns, navigation bars, tables, pagination, progress bars, and JavaScript elements like modals, tooltips, popovers, and a carousel, so developers can assemble web app interfaces without building base components from scratch. The kit takes the form of a downloadable HTML file accompanied by two CSS files and two SCSS files, which works directly in any modern browser with no server or build setup required.

Key Features

Charcoal stands out by offering a set of independent, ready-to-use Bootstrap components that can be mixed and matched without carrying unused code.

• Independent UI components — Each component works alone, so you can copy just the buttons, forms, or tables you need into an existing project and ignore the rest.
• Bootstrap 4 Beta base — Built on the Bootstrap 4 framework and includes FontAwesome icons, giving you the standard grid, responsive utilities, and icon set out of the box.
• Diverse pre-made elements — The kit offers 6 button types, 7 form variants including a validation form, 4 dropdown styles, multiple navigation bar designs, 6 table layouts, and several progress bar styles.
• Ready-to-use JavaScript widgets — Tooltips, popovers, badges, modals, and a carousel are included and wired to Bootstrap's JavaScript for interactive behavior.
• Two editable SCSS files — Developers can change SASS variables and recompile the styles to customize colors, spacing, and other design tokens site-wide.
• Responsive and cross-browser — The layout adapts to mobile, tablet, and desktop screens and is compatible with Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.
• Open-source commercial license — The template is free to download, allowed in commercial projects, and receives lifetime free updates from the author.

Who is it for?

Charcoal is aimed at anyone who needs to build a web app interface quickly without designing every UI component from scratch.

• Startup founders and web developers — Use the kit to rapidly prototype a product landing page or web app shell, getting buttons, forms, and navigation already styled and responsive.
• Mobile app designers — Assemble Android/iOS app interface previews using the pre-built navigation, form, modal, and carousel components.
• Front-end developers learning Bootstrap 4 — Study the SASS files and component markup to understand how Bootstrap 4 organizes its CSS variables and utility classes.

What can you do with Charcoal?

You can use the kit to build several common product front-ends quickly, using the existing styling for every part.

• Build an app dashboard — Combine tables, progress bars, badges, and navigation to lay out a functional, responsive admin or analytics screen.
• Create a startup landing page — Use the styled buttons, forms, and carousel to assemble a single-page marketing website for a new product.
• Prototype form flows — Take advantage of the 7 form variants, including the validation form, to demonstrate input states and error handling in a clickable wireframe.

How does Charcoal work?

The download provides a single HTML file that references the accompanying CSS and SCSS files. You can open the HTML in a browser to view the component library, then copy individual component markup into your own pages. For global theme changes, edit the two SCSS files and recompile with a SASS compiler, since the CSS files are pre-built from that source.

Pros and cons

• Pros: Free and open source; components are modular so you can include only what you need; SASS gives deeper customization; works across all major browsers and mobile devices.
• Cons: Built on Bootstrap 4 Beta, which is now outdated compared to current Bootstrap 5 releases; the kit contains just one HTML file, so it is a component pack rather than a full multi-page site template.

Pricing

Charcoal is completely free to download from ThemeWagon. The open-source license permits commercial use, and the author offers lifetime free updates, with no paid tier mentioned on the page.

FAQ

Is Charcoal free to use?

Yes, Charcoal is a free download on ThemeWagon. It is open source and licensed for commercial use, so you can use it in client projects or production apps without paying a license fee.

What components are included in Charcoal?

The kit includes 6 button types, 7 form variants (including validation), 4 dropdown styles, multiple navigation bars, 6 table layouts, pagination, progress bars, badges, modals, tooltips, popovers, and a carousel, all based on Bootstrap 4.

Does Charcoal include SASS files?

Yes. The download contains two SCSS files in addition to two CSS files. You can edit the SCSS source and recompile it with a SASS compiler to change the entire design system's variables.

Can I use Charcoal in commercial projects?

Yes, the free license explicitly allows commercial use. The template is marked as open source and includes lifetime free updates from Wired Dots.

What browsers does Charcoal support?

It is compatible with Chrome, Edge, Firefox, Opera, Safari, and mobile browsers, according to the ThemeWagon listing.