@sxo/alpine allows you to use SXO's design tokens and component logic within your Alpine.js projects with ease.

✨ Key Features

• 🧩 Headless Integration: Use SXO's state management directly in your x-data.
• ⚡ Lightweight: Minimal overhead, fitting perfectly with Alpine's philosophy.
• 🎨 Atomic Styling: Consumes @sxo/ui generators for class-based styling.
• 🛡️ Type Safe: TypeScript support for better IDE integration.

🚀 Quick Start

Installation

pnpm add @sxo/alpine @sxo/ui @sxo/engine @sxo/design

Basic Usage

<div x-data="sxoButton({ variant: 'primary' })">
  <button :class="classes" @click="handleClick">
    Click Me
  </button>
</div>

<script>
  import Alpine from 'alpinejs';
  import { sxoButton } from '@sxo/alpine';

  Alpine.data('sxoButton', sxoButton);
  Alpine.start();
</script>

📖 Documentation

For full documentation and examples, visit the Alpine.js Adaptor Documentation.

📄 License

MIT License.