Type-safe CSS-in-TypeScript without codegen. 88.5% smaller CSS than Panda CSS with modern color functions (OKLCH, color-mix) and native CSS nesting.

Installation

npm install @sylphx/silk
# or
bun add @sylphx/silk

Quick Start

import { defineConfig, createStyleSystem } from '@sylphx/silk'

const config = defineConfig({
  colors: {
    brand: { 500: '#3b82f6' }
  },
  spacing: { 4: '1rem' }
})

const { css } = createStyleSystem(config)

const button = css({
  bg: 'brand.500',      // ✨ Fully typed
  px: 4,
  _hover: { opacity: 0.8 }
})

Features

✅ Zero Codegen - No build step required (unlike Panda CSS)
✅ 88.5% Smaller - 682B vs 5,936B (Panda CSS)
✅ Full Type Safety - Only design tokens allowed
✅ Modern CSS - OKLCH colors, color-mix(), native nesting, @layer
✅ Critical CSS - Built-in extraction (unique feature)
✅ Performance Monitoring - Built-in analytics

Codegen Strategy

Silk follows a pure build-time approach:

Development: Runtime css() for hot reload and debugging
Production: Babel plugin transforms css() to static strings at build-time
No Runtime: Zero JavaScript overhead in production bundles

The default css() function throws an error if not transformed by the build plugin, ensuring zero runtime overhead.

Ecosystem

Framework Integrations

@sylphx/silk-react - React bindings with styled components
@sylphx/silk-vue - Vue 3 Composition API support
@sylphx/silk-svelte - Svelte reactive stores
@sylphx/silk-solid - Solid.js fine-grained reactivity
@sylphx/silk-qwik - Qwik resumability & zero hydration
@sylphx/silk-preact - Preact 3KB React alternative

Meta-Framework Plugins

@sylphx/silk-nextjs - Next.js App Router & RSC
@sylphx/silk-remix - Remix streaming SSR
@sylphx/silk-astro - Astro islands architecture

Build Tools

@sylphx/silk-vite-plugin - Vite plugin for build-time extraction

Design System Presets

@sylphx/silk-preset-material - Material Design 3 preset (~2KB)
@sylphx/silk-preset-minimal - Minimal design system (~1KB)

Documentation

Full documentation: GitHub Repository

License

Keywords

FAQs

What is @sylphx/silk?

Is @sylphx/silk popular?

Is @sylphx/silk well maintained?

Package last updated on 09 Nov 2025

@sylphx/silk