Skip to main content

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

SSR support, CSS extraction and developer tools

How it looks?

import { makeStyles } from '@griffel/react';

const useClasses = makeStyles({
icon: { color: 'red', paddingLeft: '5px' },

function Component() {
const classes = useClasses();

return <span className={classes.icon} />;


Quick start

By default, Griffel is a runtime CSS-in-JS engine, you can simply install and use it in code directly.

Server-Side Rendering

Griffel provides first class support for Server-Side Rendering and supports all tooling required for Next.js.

Ahead-of-time compilation

Griffel only does the expensive runtime on the first render of the component. This work can be further optimized at build time by pre-computing and transforming styles.

CSS extraction 🚧

While ahead-of-time compilation allows performs optimization to reduce runtime work, the goal of CSS extraction is to remove runtime insertion to DOM and produce CSS stylesheets.