Some of the projects are huge, the link most commonly points directly to the part of the code base which defines the components. For tests, I checked that tests for a few components look OK, no coverage or deeper analysis done.
Next things to consider:
- Is treeshaking possible when using just parts of the library? Size of the dist is also important factor, but after treeshaking the footprint should be quite similar across libraries
- Maturity and activeness (commits, recent activity, contributor distribution, closed vs open issues, PR merging activity)
- Are they migrating to another tech ? JS -> TS, Sass -> styled-components, etc
- Owners, is it community driven or company driven? Project with 13 stars can be super mature if it's been developed internally in a company for 20k commits for N years
- Accessibility
- Customizability, do you need to fork or can you customise while getting upstream updates?
Link | Commits* | JS/TS | Styling | License | Tests | Other |
---|---|---|---|---|---|---|
Ant Design | 18.6k | TS | Less. example | MIT | ☑️ | |
Aragon UI | 0.8k | JS | styled-components | MIT | Not much | |
Baseweb by Uber | 2.3k | JS (Flow) | style-tron | MIT | ☑️ | |
Basis | 0.3k | JS | emotion | MIT | ☑️ | |
Blueprint | 1.8k | TS | Sass | Apache 2.0 | ☑️ | |
Carbon | 6.8k | JS | CSS classnames linking to Sass | Apache 2.0 | ☑️ | ☑️ Storybook |
Fluent UI by Microsoft | 8.6k | TS | CSS in JS, seems to be a custom one | MIT | ☑️ | |
Grommet | 5.2k | JS | styled-components | Apache 2.0 | ☑️ | ☑️ Storybook |
Material UI | 11.9k | JS | CLSX, CSS in JS. Example | MIT | ☑️ | |
MongoDB design | 0.4k | JS | CSS | package.json says MIT, no LICENSE file | No | |
Pivotal UI | 4.0k | JS | Sass | MIT | ☑️ | |
Polaris by Shopify | 6.1k | TS | Sass | Modified MIT, see more | ☑️ | |
Primer by GitHub | 4.5k | JS | styled-components | MIT | ☑️ | |
React Bootstrap | 3.8k | JS | Bootstrap CSS classes | MIT (also Bootstrap is MIT) | ☑️ | |
Reactstrap | 0.8k | JS | Bootstrap CSS classes | MIT | ☑️ | |
RMWC | 1.9k | JS | CSS classnames using material-components-web by Google (source is Sass) | MIT (also material-components-web is MIT) | ☑️ | |
Salesforce Design System | 9.5k | JS | Sass | Code BSD 3-Clause, see: https://github.com/salesforce-ux/design-system#licenses | ☑️ | |
Thumbprint | 0.7k | TS | Sass | Apache 2.0 | ☑️ | |
VTEX Styleguide | 4.3k | JS | Custom Tachyons classes + CSS. Example implementation and CSS | Unlicensed | Not much | |
Zendesk Garden | 0.8k | TS | styled-components | Apache 2.0 | ☑️ | ☑️ Storybook |
- Most of these repos are monorepos managed with Lerna. Commit count is just to give rough estimate of how much the code has been iterated.
For further investigation, see how many Button components there are in GitHub: https://github.com/search?l=&p=99&q=created%3A%3E2015-01-01+extension%3Ajs+extension%3Ajsx+extension%3Ats+extension%3Atsx+size%3A%3E100+filename%3AButton.js+filename%3AButton.ts+filename%3AButton.jsx+filename%3AButton.tsx+filename%3Abutton.js+filename%3Abutton.ts+filename%3Abutton.jsx+filename%3Abutton.tsx&ref=advsearch&type=Code
You can find more design systems here: https://github.com/alexpate/awesome-design-systems. Not all of them have open source code.