Next-Yak
5.6.0
🦀 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:
- >20% faster navigational LCP
- >15% reduced SSR latency
- >10% faster INP
Get started and profit from these improvements without any significant increase in build times
Features
- Next.js CompatibilityWorks smoothly with both React Server and Client Components
- Build-Time CSSReduces load time by handling CSS during the build phase, using Next.js built-in CSS features
- Zero RuntimeOperates with minimal impact, simply changing CSS classes without modifying the CSSOM or DOM
- Standard CSS SyntaxWrite styles in familiar, easy-to-use CSS
- Integrates with Atomic CSSEasily combines with atomic CSS frameworks like Tailwind CSS for more design options
- No significant build-time overheadDoesn't increase the build time significantly, by only transforming statically as much as possible without the need to evaluate arbitrary JavaScript.
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 */