Modern, universal, simple styling library for the Web and React Native

Overview · Agent Prompt · Philosophy · Features · Documentation · Guides · API Reference

Overview

import { style } from 'zyzz'

namespace styles {
  export const button = style({ color: '#06c', padding: '1rem' })

  export const card = style({ display: 'grid', gap: '1rem', padding: '1.5rem' })
}

export function Card() {
  return (
    <article {...styles.card()}>
      <h2>Get started</h2>
      <button {...styles.button()}>Continue</button>
    </article>
  )
}

Agent Prompt

Paste this prompt into a coding agent:

Read zyzz.style and help me build my project with Zyzz.

Philosophy

• Typed. Properties, tokens, and variants carry their constraints into every call.
• Standard. Styles use familiar CSS properties, selectors, queries, and cascade behavior.
• Agnostic. The core is independent of frameworks, build tools, and environments.
• Universal. Shared definitions target web and native with explicit platform capabilities.
• Minimal. Small, composable APIs keep configuration and dependencies optional.
• Compiled. Rules compile ahead of time into compact output with readable class names on web.

Read Thinking in Zyzz for co-location, composition, and styling conventions.

Features

• Typed Styles: familiar CSS with property and value inference, inline or reusable.
• Themes: inferred design tokens, optional defaults, and compatible overrides.
• Token Values: configured tokens by default, with the !custom suffix for arbitrary CSS.
• Color Schemes (Light/Dark Mode): light/dark token pairs selected by CSS, without a preference listener.
• Variants: typed component choices, defaults, and compound rules.
• Dynamic Styles: runtime values bound to static CSS through custom properties.
• Value Syntax: importance, ordered fallbacks, and typed token and variable references.
• Composition: explicit style overrides that retain bindings and variant attributes.
• Static CSS: ahead-of-time output with readable classes and no runtime rule generation.

Documentation

Head to the documentation to get started and learn more about Zyzz.

Benchmarks

See Benchmarks for measured compilation, runtime, and output-size comparisons.

Comparison

See the comparison for examples covering authoring, developer and agent experience, compilation, performance, and bundle size.