@zylem/ui

Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract and Kobalte.

Usage

// Typed design tokens and atomic utilities
import { vars, sprinkles } from '@zylem/ui';

// CSS bundle (import once at app entry)
import '@zylem/ui/styles.css';

// Solid components (compiled by the consuming app's bundler)
import { Button } from '@zylem/ui/components';

// Camera icons (Lucide-shaped originals: currentColor stroke, 24×24)
import { Perspective, GameCamera } from '@zylem/ui/icons';

Development

Requires Node v22.12.0 (see .nvmrc) and pnpm.

pnpm install

# Build the library (tsup) into dist/
pnpm build

# Watch mode
pnpm dev

# Run the showcase app at http://localhost:3030
pnpm showcase

# Lint
pnpm lint

Showcase

The showcase/ directory contains a Vite + Solid app demonstrating every token group and component (colors, typography, buttons, panels, toolbar, accordion, and more). It compiles the vanilla-extract sources live, so edits to any *.css.ts file hot-reload without a library build.