# DaisyUI Components Reference Component reference for DaisyUI + Tailwind CSS implementation with The Puppy Day theme configuration. --- ## Theme Configuration ```javascript \/\/ tailwind.config.js module.exports = { daisyui: { themes: [ { puppyday: { \/\/ Primary - Charcoal "primary": "#434E54", "primary-focus": "#363F44", "primary-content": "#FFFFFF", \/\/ Secondary - Lighter Cream "secondary": "#EAE0D5", "secondary-focus": "#DCD2C7", "secondary-content": "#434E54", \/\/ Accent "accent": "#5A6670", "accent-focus": "#434E54", "accent-content": "#FFFFFF", \/\/ Neutral "neutral": "#F5F5F5", "neutral-focus": "#E5E5E5", "neutral-content": "#434E54", \/\/ Base - Warm cream background "base-100": "#F8EEE5", "base-200": "#EAE0D5", "base-300": "#DCD2C7", "base-content": "#434E54", \/\/ Semantic colors "info": "#74B9FF", "success": "#6BCB77", "warning": "#FFB347", "error": "#EF4444", } } ] } } ``` --- ## Buttons ### Base Classes ```html

Title<\/h2>
Description text<\/p>

{title}<\/h3> <\/div> {\/* Content \/}
{description} <\/p> {\/ Actions *\/}

Title<\/h2> Description text<\/p>

{title}<\/h3> <\/div> {\/* Content *\/} {description} <\/p> {\/* Actions *\/}

Title<\/h2>
Description text<\/p>

{title}<\/h3> <\/div> {\/* Content \/}
{description} <\/p> {\/ Actions *\/}

daisyui-components