Getting Started with DaisyUI#

Prerequisites

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

SignalX DaisyUI provides pre-built, accessible UI components powered by DaisyUI and Tailwind CSS.

Installation#

Terminal

pnpm add @sigx/daisyui

Make sure you also have Tailwind CSS and DaisyUI configured in your project.

Setup#

1. Configure Tailwind#

Add DaisyUI to your Tailwind config:

JavaScript

// tailwind.config.js
module.exports = {
    content: ['./src/**/*.{tsx,ts,jsx,js}'],
    plugins: [require('daisyui')],
    daisyui: {
        themes: ['light', 'dark', 'cupcake', 'forest'],
    },
};

2. Initialize Theme#

Initialize the theme system in your app:

TSX

import { component, onMounted } from 'sigx';
import { initializeTheme } from '@sigx/daisyui';

const App = component(() => {
    onMounted(() => {
        initializeTheme({ defaultTheme: 'dark' });
    });
    
    return () => <div>...</div>;
});

Using Components#

Import and use components directly:

TSX

Loading preview...

import { component, signal, render } from 'sigx';
import { Button, Modal, ModalHeader, ModalBody, Card, CardTitle } from '@sigx/daisyui';

const MyComponent = component(() => {
    const showModal = signal(false);
    
    return () => (
        <Card>
            <Card.Body>
                <CardTitle>Welcome!</CardTitle>
                <p>This is a beautiful card component.</p>
                <Card.Actions>
                    <Button 
                        variant="primary"
                        onClick={() => showModal.value = true}
                    >
                        Open Modal
                    </Button>
                </Card.Actions>
            </Card.Body>
            
            <Modal 
                open={showModal.value}
                onClose={() => showModal.value = false}
            >
                <ModalHeader onClose={() => showModal.value = false}>Hello!</ModalHeader>
                <ModalBody>
                    Modal content goes here.
                </ModalBody>
            </Modal>
        </Card>
    );
});

render(<MyComponent />, "#sandbox");

Theme Toggle#

Add a theme toggle to your app:

TSX

import { ThemeToggle } from '@sigx/daisyui';

// Simple toggle between light and dark
<ThemeToggle />

// Or with custom themes
<ThemeToggle themes={['light', 'dark', 'cupcake']} />

Next Steps#

Components - Browse all available components
Theming - Customize themes and colors
API Reference - Complete API documentation