A simple but powerful
CSS library for modern projects

A reimagined alternative to Bootstrap and Tailwind CSS. Build modern interfaces with both utility classes and ready-to-use components. Free and open-source.

https://cdn.jsdelivr.net/gh/getfinalui/finalcss@main/css/final.min.css

How does it look by default?

Elements created with Final CSS utility and component classes.
Customize everything to match your brand style.

Templates

Modern website templates, crafted with Final CSS

Similar to Bootstrap 5, but...

Final CSS is more lightweight, has no JavaScript dependency, and includes simplified components with additional utility classes. It is redesigned with cleaner, more aesthetic defaults. If you have used the Bootstrap framework, you have probably faced challenges like overriding styles or changing SCSS variables. Both can be time-consuming and frustrating. Final CSS is built to make that work simpler.

What is the problem with Bootstrap?

I have used Bootstrap for hundreds of projects. It provides customizable SCSS variables and separate Sass files for each component. You can also use CSS directly from a CDN, which is great, but...

  • It is bloated with many styles and components.
  • Its navbar is very limited, so in many cases you have to create your own.
  • Utility classes are limited. For example, custom element sizes often require new class names and another stylesheet.
  • Nav links and buttons use inline-block, so SVG icons or font icons can break vertical alignment.
  • Customizing Sass variables is too complicated because many variables depend on other variables.
  • Colors are complicated, with too many color variables, and dark mode works incorrectly for many components.
  • Bootstrap color classes are hard to remember. For example, text-bg-primary, bg-primary, --bs-primary-rgb, and --bs-primary-text-emphasis all require documentation.
What is the problem with Tailwind?

Tailwind is great, and many large companies use it. Still, many developers complain about it.

  • Long and messy class names can make HTML repetitive and hard to scan.
  • It can lock you into its ecosystem.
  • Creating dark mode can be difficult because you often define dark colors for each element.
  • Tooling and setup can become complex: npm, PostCSS, CLI tools, and more.
  • It ships many color variants that many projects never use.
  • There are many other tradeoffs that become clearer in real projects.

Enjoy styling with final.css