Getting Started with DaisyUI#

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

Installation#

pnpm add @sigx/daisyui daisyui tailwindcss

npm install @sigx/daisyui daisyui tailwindcss

yarn add @sigx/daisyui daisyui tailwindcss

bun add @sigx/daisyui daisyui tailwindcss

The components run against your app's sigx, so there are no extra core packages to install — the only extra peers are the styling libraries daisyui (≥ 5) and tailwindcss (≥ 4), installed above. @sigx/daisyui does require your app to be on SignalX core 0.12.x (sigx, @sigx/reactivity, @sigx/runtime-core, @sigx/runtime-dom, all >=0.12.0 <0.13.0); an older core can't install it — pnpm's strict-peer-dependencies refuses outright and other package managers warn. The components' own API is unchanged across these core bumps, so they need no code changes — but upgrading a core from before 0.9.0 crosses core's async removals (useAsync / <Suspense> / <ErrorBoundary> → useData / errorScope / <Defer>), which an app using those must migrate even though daisyui itself is unaffected. Make sure Tailwind CSS and DaisyUI are also configured in your project (see below).

Setup#

1. Configure Tailwind#

Add DaisyUI to your Tailwind config:

// 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:

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:

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:

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