Skip to main content

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

SSR support, CSS extraction and developer tools

Get startedTry it out

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} />;
}

Features

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.

Open source at Microsoft·Microsoft Privacy Statement