Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries

Extensive List of CSS Frameworks and UI Libraries.
https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries

List: Awesome-CSS-Frameworks-and-UI-Libraries

css css-framework frameworks libraries ui ui-library

Last synced: about 1 month ago
JSON representation

Extensive List of CSS Frameworks and UI Libraries.

Awesome Lists containing this project

README

        

# Gabo's Awesome CSS Frameworks and UI Libraries

An extensive list of Awesome CSS Frameworks and UI/Components Libraries based on **[Awesome CSS Frameworks](https://github.com/troxler/awesome-css-frameworks)**.

Last update: 2024-10-20

## Categories

* [The Big Ones (22)](#the-big-ones)
* [Base / Reset / Normalize (16)](BaseResetNormalize/README.md)
* [General Purpose (69)](GeneralPurpose/README.md)
* [Lightweight (28)](Lightweight/README.md)
* [Material Design (8)](MaterialDesign/README.md)
* [Specialized: Email (7)](SpecializedEmail/README.md)
* [Specialized: Grid Systems (5)](SpecializedGridSystems/README.md)
* [Specialized: For React (61)](SpecializedReact/README.md)
* [Specialized: Other (14)](Specialized/README.md)
* [No Longer Maintained (87)](NoLongerMaintained/README.md)

## The Big Ones

Frameworks with more than ~20K GitHub Stars.

### [Bootstrap](https://github.com/twbs/bootstrap) - [Official Site](http://getbootstrap.com)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/twbs/bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/twbs/bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/twbs/bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/twbs/bootstrap.svg?style=flat-square&maxAge=5184000)]()

The most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile first projects on the web. Bootstrap is an open
source toolkit for developing with HTML, CSS, and JS. Quickly prototype
your ideas or build your entire app with our Sass variables and mixins,
responsive grid system, extensive prebuilt components, and powerful
plugins built on jQuery.

### [Material-UI / MUI Core](https://github.com/mui/material-ui) - [Official Site](https://mui.com/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/mui/material-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/mui/material-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/mui/material-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/mui/material-ui.svg?style=flat-square&maxAge=5184000)]()

React components for faster and easier web development. Build your own design system, or start with Material Design.

### [Ant Design](https://github.com/ant-design/ant-design/) - [Official Site](https://ant.design/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/ant-design/ant-design.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/ant-design/ant-design.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/ant-design/ant-design.svg?style=flat-square&maxAge=5184000)]()

An enterprise-class UI design language and React UI library.

### [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) - [Official Site](https://tailwindcss.com/)

[![Category](https://img.shields.io/badge/-Specialized:%20Other-FFB400.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/tailwindcss/tailwindcss.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/tailwindcss/tailwindcss.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/tailwindcss/tailwindcss.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/tailwindcss/tailwindcss.svg?style=flat-square&maxAge=5184000)]()

A Utility-First CSS Framework for Rapid UI Development. Tailwind is
different from frameworks like Bootstrap, Foundation, or Bulma in that
it's not a UI kit. It doesn't have a default theme, and there are no
built-in UI components. On the flip side, it also has no opinion about
how your site should look and doesn't impose design decisions that you
have to fight to undo. If you're looking for a framework that comes with
a menu of predesigned widgets to build your site with, Tailwind might
not be the right framework for you. But if you want a huge head start
implementing a custom design with its own identity, Tailwind might be
just what you're looking for.

### [shadcn/ui](https://github.com/shadcn/ui) - [Official Site](https://ui.shadcn.com/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/shadcn/ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/shadcn/ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/shadcn/ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/shadcn/ui.svg?style=flat-square&maxAge=5184000)]()

Beautifully designed components built with Radix UI and Tailwind CSS.
Accessible and customizable components that you can copy and paste into your apps. Free. Open Source.
And Next.js 13 Ready.

### [normalize.css](https://github.com/necolas/normalize.css/) - [Official Site](http://necolas.github.io/normalize.css/)

[![Category](https://img.shields.io/badge/-No%20Longer%20Maintained-FB3640.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-no-lightgrey.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/necolas/normalize.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/necolas/normalize.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/necolas/normalize.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/necolas/normalize.css.svg?style=flat-square&maxAge=5184000)]()

A modern, HTML5-ready alternative to CSS resets. Normalize.css makes
browsers render all elements more consistently and in line with modern
standards. It precisely targets only the styles that need normalizing.

### [Semantic UI](https://github.com/semantic-org/semantic-ui) - [Official Site](https://semantic-ui.com/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/semantic-org/semantic-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/semantic-org/semantic-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/semantic-org/semantic-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/semantic-org/semantic-ui.svg?style=flat-square&maxAge=5184000)]()

Semantic is a UI component framework based around useful principles from
natural language. Semantic allows developers to build beautiful websites
fast, with concise HTML, intuitive javascript, and simplified debugging,
helping make front-end development a delightful experience. Semantic is
responsively designed allowing your website to scale on multiple
devices. Semantic is production ready and partnered with frameworks such
as React, Angular, Meteor, and Ember, which means you can integrate it
with any of these frameworks to organize your UI layer alongside your
application logic.

### [Bulma](https://github.com/jgthms/bulma) - [Official Site](https://bulma.io/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-no-lightgrey.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/jgthms/bulma.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/jgthms/bulma.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/jgthms/bulma.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/jgthms/bulma.svg?style=flat-square&maxAge=5184000)]()

Bulma is a free and open source CSS framework based on Flexbox. It's
100% Responsive (Designed for mobile first), Modular (Just import what
you need) and Modern (Built with Flexbox).

### [Materialize Original](https://github.com/Dogfalo/materialize) - [Official Site](http://materializecss.com/)

[![Category](https://img.shields.io/badge/-No%20Longer%20Maintained-FB3640.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/Dogfalo/materialize.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/Dogfalo/materialize.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/Dogfalo/materialize.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/Dogfalo/materialize.svg?style=flat-square&maxAge=5184000)]()

Materialize, a CSS Framework based on Material Design.

### [Chakra UI](https://github.com/chakra-ui/chakra-ui) - [Official Site](https://chakra-ui.com/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/chakra-ui/chakra-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/chakra-ui/chakra-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/chakra-ui/chakra-ui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/chakra-ui/chakra-ui.svg?style=flat-square&maxAge=5184000)]()

Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to
build your React applications.

### [daisyUI](https://github.com/saadeghi/daisyui) - [Official Site](https://daisyui.com/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-no-lightgrey.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/saadeghi/daisyui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/saadeghi/daisyui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/saadeghi/daisyui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/saadeghi/daisyui.svg?style=flat-square&maxAge=5184000)]()

Tailwind CSS Components. Clean HTML with component classes. Customizable and themeable. Pure CSS, No dependencies.

### [Material Design Lite](https://github.com/google/material-design-lite) - [Official Site](https://getmdl.io/)

[![Category](https://img.shields.io/badge/-No%20Longer%20Maintained-FB3640.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/google/material-design-lite.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/google/material-design-lite.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/google/material-design-lite.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/google/material-design-lite.svg?style=flat-square&maxAge=5184000)]()

Material Design Lite lets you add a Material Design look and feel to
your websites. It doesn’t rely on any JavaScript frameworks and aims to
optimize for cross-device use, gracefully degrade in older browsers, and
offer an experience that is immediately accessible. Material Design Lite
is now in limited support, with development having moved to the
[Material Components for the web](MaterialDesign/README.md#material-components-web)
repository.

### [Foundation](https://github.com/foundation/foundation-sites) - [Official Site](http://foundation.zurb.com/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/foundation/foundation-sites.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/foundation/foundation-sites.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/foundation/foundation-sites.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/foundation/foundation-sites.svg?style=flat-square&maxAge=5184000)]()

Foundation is the most advanced responsive front-end framework in the
world. Quickly go from prototype to production, building sites or apps
that work on any kind of device with Foundation. Includes a fully
customizable, responsive grid, a large library of Sass mixins, commonly
used JavaScript plugins, and full accessibility support.

### [Headless UI](https://github.com/tailwindlabs/headlessui) - [Official Site](https://headlessui.dev/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/tailwindlabs/headlessui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/tailwindlabs/headlessui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/tailwindlabs/headlessui.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/tailwindlabs/headlessui.svg?style=flat-square&maxAge=5184000)]()

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

### [Mantine](https://github.com/mantinedev/mantine) - [Official Site](https://mantine.dev/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/mantinedev/mantine.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/mantinedev/mantine.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/mantinedev/mantine.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/mantinedev/mantine.svg?style=flat-square&maxAge=5184000)]()

Mantine is a MIT licensed open source react components and hooks library
with focus on usability, accessibility and developer experience.

### [react virtualized](https://github.com/bvaughn/react-virtualized) - [Official Site](https://bvaughn.github.io/react-virtualized/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/bvaughn/react-virtualized.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/bvaughn/react-virtualized.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/bvaughn/react-virtualized.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/bvaughn/react-virtualized.svg?style=flat-square&maxAge=5184000)]()

React components for efficiently rendering large lists and tabular data.

### [ReactAdmin](https://github.com/marmelab/react-admin) - [Official Site](https://marmelab.com/react-admin/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/marmelab/react-admin.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/marmelab/react-admin.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/marmelab/react-admin.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/marmelab/react-admin.svg?style=flat-square&maxAge=5184000)]()

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React
and Material Design

### [Material Design for Bootstrap v5 & v4](https://github.com/mdbootstrap/mdb-ui-kit) - [Official Site](https://mdbootstrap.com/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-yes-blue.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/mdbootstrap/mdb-ui-kit.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/mdbootstrap/mdb-ui-kit.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/mdbootstrap/mdb-ui-kit.svg?style=flat-square&maxAge=5184000)]()

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation.
MDB is a collection of free Bootstrap templates, themes, design tools & resources.

### [Pure](https://github.com/pure-css/pure/) - [Official Site](https://purecss.io/)

[![Category](https://img.shields.io/badge/-Base%20/%20Reset%20/%20Normalize-574AE2.svg?style=flat-square&maxAge=5184000)]()
[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-no-lightgrey.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/pure-css/pure.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/pure-css/pure.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/pure-css/pure.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/pure-css/pure.svg?style=flat-square&maxAge=5184000)]()

A set of small, responsive CSS modules that you can use in every web
project. Pure is meant to be a starting point for every website or web
app. We take care of all the CSS work that every site needs, without
making it look cookie-cutter.

### [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) - [Official Site](https://react-bootstrap.github.io/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/react-bootstrap/react-bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/react-bootstrap/react-bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/react-bootstrap/react-bootstrap.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/react-bootstrap/react-bootstrap.svg?style=flat-square&maxAge=5184000)]()

Bootstrap components built with React.

### [NES.css](https://github.com/nostalgic-css/NES.css) - [Official Site](https://nostalgic-css.github.io/NES.css/)

[![Category](https://img.shields.io/badge/-General%20Purpose-654597.svg?style=flat-square&maxAge=5184000)]()
[![JS Dependency](https://img.shields.io/badge/JS-no-lightgrey.svg?style=flat-square&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/nostalgic-css/NES.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/nostalgic-css/NES.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/nostalgic-css/NES.css.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/nostalgic-css/NES.css.svg?style=flat-square&maxAge=5184000)]()

NES.css is a NES-style(8bit-like) CSS Framework.

### [Blueprint](https://github.com/palantir/blueprint) - [Official Site](https://blueprintjs.com/)

[![Category](https://img.shields.io/badge/-Specialized:%20For%20React-759AAB.svg?style=flat-square&logo=react&maxAge=5184000)]()
[![GitHub last commit](https://img.shields.io/github/last-commit/palantir/blueprint.svg?style=flat-square&maxAge=5184000)]()
[![GitHub tag](https://img.shields.io/github/tag/palantir/blueprint.svg?style=flat-square&maxAge=5184000)]()
[![GitHub stars](https://img.shields.io/github/stars/palantir/blueprint.svg?style=flat-square&maxAge=5184000)]()
[![GitHub issues](https://img.shields.io/github/issues/palantir/blueprint.svg?style=flat-square&maxAge=5184000)]()

Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for
desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

[_Return to Categories_](#categories)