Next-Yak

9.4.1

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

Validated across millions of real-world users at Digitec Galaxus, Switzerland's largest e-commerce platform:

• >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

• Multi-Framework
  First-class support for Next.js (Webpack & Turbopack), Vite 7+ (react-router, TanStack Start, ...), and Storybook
• Zero-Runtime CSS
  Extracts CSS at compile time with zero runtime overhead
• React Server Components
  Works seamlessly with both Server and Client Components
• Standard CSS Syntax
  Write familiar CSS with full nesting, keyframes, and media query support
• Integrates with atomic CSS
  Combines with utility-first frameworks like Tailwind CSS

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 */