Griffel

CSS-in-JS with ahead-of-time compilation

CSS in JSReactAtomic CSS
microsoft/griffelgriffel.js.org@griffel/react

README



Griffel's logo

CSS-in-JS with ahead-of-time compilation ⚡️

NPM Downloads MIT License Github discussions


Griffel (_German for stylus/pen_) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.

🚀   Zero config start: Griffel has both runtime & build time implementations

🔥   Optional build time transforms to improve performance

💪   Type-safe styles via csstype

🧩   Uses Atomic CSS to reuse styles and avoid specificity issues with CSS

📝   _Experimental_ CSS extraction with Webpack plugin

🐞   Debug using Griffel DevTools extension

Griffel with React


  1. ``` sh
  2. npm install @griffel/react
  3. # or
  4. yarn add @griffel/react
  5. ```

Read more

Learn more?


Check series episodes of Fluent UI Insights related to styling issues and Griffel 🎥

|                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| Watch EP02: Styling | Watch EP03: Griffel |

Contributing


This project welcomes contributions and suggestions, please see CONTRIBUTING.md to get started.

Trademarks


This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
trademarks or logos is subject to and must follow
Microsoft's Trademark & Brand Guidelines.
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
Any use of third-party trademarks or logos are subject to those third-party's policies.

License


This project is licensed under the MIT License, see the LICENSE.md file for details.