Framework-agnostic UI component logic and style generators for SXO.
npm install @sxo/ui---
@sxo/ui bridges the gap between Headless Logic and Visual Design. It provides the "Style Contract" that defines how components should look by translating design tokens and states into atomic CSS classes.
While @sxo/design handles behavior, @sxo/ui handles the visual identity:
1. Contract Definition: Defines standard Props and interfaces for all framework adaptors.
2. Style Generation: Provides pure functions that map component states (e.g., variant, size, isOpen) to atomic CSS classes.
3. Unopinionated Layout: It doesn't render HTML directly, allowing adaptors to maintain their own rendering optimizations.
- 🎨 Atomic Generators: High-performance functions to generate utility-first classes.
- 📐 Strict Typing: Full TypeScript interfaces for every component prop and state.
- 🧩 Framework Independent: Use the same style logic in React, Vue, Solid, or even vanilla JS.
- 🚀 AOT Ready: Designed for both runtime generation and ahead-of-time compilation.
``bash`
pnpm add @sxo/ui @sxo/engine
Generate atomic styles based on component state. This is how we keep the UI consistent while remaining headless at the logic level.
`typescript
import { getButtonClasses } from '@sxo/ui';
// Map component state to atomic classes
const classes = getButtonClasses({
variant: 'primary',
size: 'md',
loading: true
});
// Result: "inline-flex bg-primary-DEFAULT px-4 py-2 opacity-50 cursor-wait ..."
`
Ensures that every framework implementation (React, Vue, etc.) adheres to the same API.
`typescript``
import type { ButtonProps } from '@sxo/ui';
For full documentation and examples, visit the Components Index.
MIT License.