Next-Yak

5.6.0
Image of yak coding

🦀 Zero-Runtime CSS-in-JS powered by Rust. Write styled-components syntax, get build-time CSS extraction and full RSC compatibility.

import { styled, css } from "next-yak";

export const Title = styled.button<{ $primary: boolean }>`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
  ${({ $primary }) => $primary && css`
    background: blue;
    color: white;
  `}
`;

Performance

Next-Yak is way faster than most other CSS-in-JS libraries. Learn more about its Zero-Runtime approach in the docs or take a look at the comparison of 13 popular CSS approaches

The performance was validated across many thousands of real-world users:

Get started and profit from these improvements without any significant increase in build times

Features

import styled from "styled-components";

const Title = styled.h1`
font-size: 1.5em;
color: palevioletred;
&:hover {
color: red;
}
`;

const App = () => (
<Title>
Hello World
</Title>
);
// JS output (auto-generated)

const Title = styled.h1.withConfig({
componentId: "sc-1289dod-0"
})`
font-size: 1.5em;
color: palevioletred;
&:hover {
color: red;
}
`;

const App = () => (
<Title>
Hello World
</Title>
);
/* no static css */