DaisyUI API Reference#

Complete API reference for @sigx/daisyui.

Theme Functions#

initializeTheme#

Initializes the theme system. Call on app mount.

TSX 
import { initializeTheme } from '@sigx/daisyui';

initializeTheme({
    defaultTheme?: string,  // Default: 'light'
    storageKey?: string,    // Default: 'theme'
});

setTheme#

Sets the current theme.

TSX 
import { setTheme } from '@sigx/daisyui';

setTheme('dark');

getTheme#

Gets the current theme.

TSX 
import { getTheme } from '@sigx/daisyui';

const theme = getTheme(); // 'dark'

Components#

Button#

TSX 
interface ButtonProps {
    variant?: 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    outline?: boolean;
    loading?: boolean;
    disabled?: boolean;
    onClick?: () => void;
}
TSX 
interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    closeOnBackdrop?: boolean;  // Default: true
    closeOnEscape?: boolean;    // Default: true
}

// Sub-components
Modal.Header
Modal.Body  
Modal.Actions

Card#

TSX 
interface CardProps {
    compact?: boolean;
    bordered?: boolean;
    imageFull?: boolean;
}

// Sub-components
Card.Image
Card.Body
Card.Title
Card.Actions

Input#

TSX 
interface InputProps {
    type?: string;           // Default: 'text'
    placeholder?: string;
    label?: string;
    error?: string;
    size?: 'xs' | 'sm' | 'md' | 'lg';
    variant?: 'bordered' | 'ghost';
    value?: string;
    onInput?: (value: string) => void;
}

Alert#

TSX 
interface AlertProps {
    variant?: 'info' | 'success' | 'warning' | 'error';
    dismissible?: boolean;
    onDismiss?: () => void;
}

Badge#

TSX 
interface BadgeProps {
    variant?: 'primary' | 'secondary' | 'accent' | 'ghost' | 'info' | 'success' | 'warning' | 'error';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    outline?: boolean;
}

ThemeToggle#

TSX 
interface ThemeToggleProps {
    themes?: string[];  // Default: ['light', 'dark']
}
TSX 
interface DropdownProps {
    position?: 'top' | 'bottom' | 'left' | 'right';
    align?: 'start' | 'end';
    hover?: boolean;
}

// Sub-components
Dropdown.Toggle
Dropdown.Menu
Dropdown.Item

Tabs#

TSX 
interface TabsProps {
    variant?: 'boxed' | 'bordered' | 'lifted';
    size?: 'xs' | 'sm' | 'md' | 'lg';
}

// Sub-components
Tabs.Tab: { active?: boolean; disabled?: boolean }

Progress#

TSX 
interface ProgressProps {
    value: number;
    max?: number;       // Default: 100
    variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
}