CSS Frameworks - Notes

• CSS Frameworks
• Notes

A brief list and notes on CSS component libraries.

ℹ️ This is a "notes collection" item. I use notes collection to compile practical information for myself in an unpolished way. It's probably best not to rely on this information without verifying it against up-to-date sources. Also, it is not a good place to use as reference, as the content is subject to frequent updates without warning.

Intro

I routinely need to select a CSS component library for UI projects. Depending on the project’s needs, I often revisit the library’s documentation to remember the capabilities of the component library. To simplify this process, I’m adding my notes here about the libraries I use frequently.

I believe at some point I’ll need to serve it as a filterable table as well. 😄

CSS-only

1. https://daisyui.com/
   1. Tailwind CSS
   2. MIT License
   3. No build-in typography setup like prose classes, but it is compatible with it.
   4. Mixing Tailwind and daisyUI utilities good at first but removing one later is not an easy task. (Only if you need.)
2. https://www.hyperui.dev/
   1. Tailwind CSS
   2. MIT License
   3. No installation, just copy & paste components.
3. https://tailblocks.cc/
   1. Tailwind CSS
   2. MIT License
   3. No installation, just copy & paste components.
4. https://picocss.com/
   1. Simple yet powerful
   2. MIT License
   3. No-class version available.
   4. A sass compiler warning happening. (I had to separate build process in a project.)
5. https://simplecss.org/
   1. Semantic base styles
   2. MIT License
6. https://andybrewer.github.io/mvp/
   1. A no-class minimal & semantic styles.
   2. MIT License
7. https://yegor256.github.io/tacit/
   1. Classless
   2. MIT License
8. https://uico.robino.dev/
   1. Compatible with Tailwind CSS.
   2. MIT License
9. https://oxal.org/projects/sakura/
   1. Classless
   2. MIT License
10. https://jenil.github.io/chota/
    1. Semantic styling + class-based customization.
    2. MIT License
11. https://bulma.io/
    1. MIT License
12. https://picnicss.com/
    1. Semantic styling + class-based customization.
    2. MIT License
13. https://watercss.kognise.dev/
    1. Classless
    2. MIT License
14. https://pure-css.github.io/
    1. Basic initial styles for HTML elements.
    2. BSD License (Very similar to MIT.)
15. https://milligram.io/
    1. Semantic styling + class-based customization.
    2. MIT License
16. https://picturepan2.github.io/spectre/index.html
    1. Basic styles, components, pure CSS experimental blocks.
    2. MIT License
17. https://vanillacss.com/
    1. Very basic, classless, semantic styling.
    2. MIT License
18. https://tailwindcss-typography.vercel.app/
    1. Tailwind CSS
    2. MIT License
    3. Basic typography defaults
19. https://tailwindcss-forms.vercel.app/
    1. Tailwind CSS
    2. Basic form styles
    3. MIT License
20. https://tailwindcss.com/plus
    1. Tailwind CSS
    2. Paid License
    3. Tailwind’s paid collection of components, themes, …
21. https://mincss.com/
    1. Classless, minimal CSS.
    2. MIT License (No license file attached in the repo.)
22. https://www.ripple-ui.com/
    1. Tailwind CSS
    2. MIT License
    3. Similar to daisyUI but built with Tailwind v3.
23. https://www.tailwind-kit.com/
    1. Tailwind CSS
    2. MIT License
    3. Built with Tailwind v3.

CSS + JavaScript / Framework Components

1. https://www.skeleton.dev/
   1. Tailwind CSS
   2. MIT License
   3. More of a multi framework comaptible design system.
   4. Support for mostly used frameworks. + Framework-agnostic core.
2. https://chakra-ui.com/
   1. React Frameworks
   2. MIT License
   3. Offers paid version with extra blocks.
3. https://merakiui.com/
   1. Tailwind CSS
   2. MIT License
   3. Interactivity with Alpine.js.
4. https://ui.shadcn.com/
   1. Tailwind CSS
   2. MIT License
5. https://getbootstrap.com/
   1. MIT License
   2. Good, old bootstrap toolkit.
6. https://preline.co/
   1. Tailwind CSS
   2. MIT License + Preline UI Fair Use License
   3. Has a paid version and offers paid themes.
7. https://flyonui.com/
   1. Tailwind CSS
   2. MIT License + Depends on Preline UI Fair Use License.
   3. Support for mostly used frameworks.
8. https://ui.full.dev/
   1. Build with Astro components but framework-agnostic.
   2. MIT License
9. https://lit.dev/
   1. Web Components.
   2. BSD 3-Clause License (Very similar to MIT.)
10. https://headlessui.com/
    1. Tailwind CSS
    2. MIT License
    3. React, Vue versions.
11. https://mantine.dev/
    1. MIT License
    2. React
12. https://smeltejs.com/
    1. Tailwind CSS
    2. MIT License
    3. Material Design
13. https://www.radix-ui.com/
    1. React
    2. MIT License
14. https://felte.dev/
    1. Svelte, Solid and React support but also supports vanilla js.
    2. MIT License
15. https://konstaui.com/
    1. Tailwind CSS
    2. MIT License
    3. Mobile-only
16. https://grail-ui.vercel.app/
    1. Svelte components.
    2. MIT License
17. https://flowbite.com/
    1. Tailwind CSS
    2. MIT License
    3. Has a base version and lots of framework integrations.
    4. Offers a paid version.
18. https://www.melt-ui.com/
    1. Svelte components.
    2. MIT License
19. https://www.creative-tim.com/twcomponents/
    1. Tailwind CSS
    2. Community-driven component repository.
    3. Parent domain offers paid version.
20. https://shoelace.style/
    1. Web Components
    2. MIT License
    3. Framework-agnostic, versions for React, Vue, Angular, Svelte.
21. https://wind-ui.com/
    1. Tailwind CSS
    2. MIT + CC BY-SA 4.0 (You need to have the same license on the dericative work.)
    3. HTML + React versions are available.
    4. Offers paid version.
22. https://versoly.com/versoly-ui
    1. Tailwind CSS
    2. MIT License
23. https://learn.microsoft.com/en-us/fluent-ui/web-components/
    1. Web Components
    2. MIT License
    3. Framework-agnostic, custom version for React.
24. https://vanillaframework.io/docs
    1. Bootstrap-like toolkit.
    2. LGPL-3.0 License (Still permissive but you need to share modifications with the same license.)
25. https://mui.com/material-ui/
    1. Material Design
    2. MIT License
    3. React
    4. Offers a paid version.
26. https://materializecss.com/
    1. Material Design
    2. MIT License
27. https://ant.design/
    1. A component library and design language
    2. MIT License
    3. Lots of similar side projects