design-system
storybook-design-token
Our great sponsors
| design-system | storybook-design-token | |
|---|---|---|
| 1 | 1 | |
| 290 | 634 | |
| 1.7% | 1.6% | |
| 9.5 | 7.6 | |
| 7 days ago | about 1 month ago | |
| TypeScript | TypeScript | |
| GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
design-system
storybook-design-token
-
Storybook for everyone: CSF vs. MDX
Designers can now share their design tokens and write documentation to make developers understand the reason behind design patterns. Here is a very cool example from the Storybook MDX announcement article. Philip Siekmann created an amazing addon that generates design token documentation from your stylesheets and asset files and the demo file is documented using MDX.
What are some alternatives?
rainbow-sprinkles - Dynamic, theme-driven, style props for vanilla-extract.
react-uswds - USWDS 3.0 components built in React
design-system - Masala Design System (MDS) is an open-source design system built at Innovaccer. This is a simple and customisable component library to build faster, beautiful, and more accessible React applications on the guidelines and principles of Masala Design System.
design-tokens - 🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
aesthetic - 🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
Awesome-Design-Tokens - A list of resources on all things to do with Design Tokens
packages - 💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.
amplify-ui - Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
NovaSheets - The simple but powerful CSS preprocessor
addon-react-native-web - Build react-native-web projects in Storybook for React
ngx-nice-avatar - Avatar creator usign svg
theme-ui - Build consistent, themeable React apps based on constraint-based design principles