microsoft/griffel

microsoft/griffel

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

Language: TypeScript

License: MIT

Stars: 1278

Forks: 75

Open issues: 50

Created: 2021-12-14T16:38:54Z

Pushed: 2026-06-16T06:32:42Z

Default branch: main

Fork: no

Archived: no

README:

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

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](./packages/webpack-loader) 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](./packages/webpack-extraction-plugin)

🐞 Debug using Griffel DevTools extension

Griffel with React

npm install @griffel/react
# or
yarn add @griffel/react

• Quick start
• API guide
• [README](./packages/react)

Learn more?

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

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

Contributing

This project welcomes contributions and suggestions, please see [CONTRIBUTING.md](./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](LICENSE.md) file for details.