@sigx/daisyui

DaisyUI

Beautiful UI Components for SignalX

Pre-built, accessible UI components powered by DaisyUI and Tailwind CSS. Build stunning interfaces with zero configuration and full theme support.

$pnpm add @sigx/daisyui

Prerequisites

Before diving in, make sure you're familiar with: SignalX Core basics, Components

Features

🎨

30+ Themes

Switch between light, dark, and 30+ other themes with a single line of code.

🧱

Rich Component Library

Buttons, modals, cards, forms, navigation, and more - all ready to use.

♿

Accessible

Built with accessibility in mind. ARIA attributes and keyboard navigation included.

âš¡

Reactive Integration

Components integrate seamlessly with SignalX signals and reactivity system.

🎯

Tailwind Powered

Built on Tailwind CSS for easy customization and consistent styling.

📱

Responsive

Mobile-first design with responsive variants for all screen sizes.

Quick Example

See how easy it is to get started

example.tsx
import { component, signal } from 'sigx';
import { Button, Modal, ThemeToggle } from '@sigx/daisyui';

const App = component(() => {
    const isOpen = signal(false);

    return () => (
        <div class="p-8">
            <ThemeToggle />
            
            <Button 
                variant="primary" 
                onClick={() => isOpen.value = true}
            >
                Open Modal
            </Button>

            <Modal 
                isOpen={isOpen.value} 
                onClose={() => isOpen.value = false}
            >
                <h2>Hello DaisyUI!</h2>
                <p>Beautiful components, zero effort.</p>
            </Modal>
        </div>
    );
});

Ready to get started?

Check out the documentation to learn more about DaisyUI.

Read the Docs