> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# daisyUI Theming Masterclass

Getting the most from daisyUI 5 on PageWeave — component selection, overrides, and the utility bridge.

- Section: Design
- Tags: daisyui theme components tailwind

PageWeave ships Tailwind v4 + daisyUI 5 pre-wired. Mastery is knowing when to lean on components, when to bridge with utilities, and when to write custom CSS (rarely).

## Component selection protocol

Before writing any markup:

1. Name the function (not the look): "group content for scanning" → card/list; "single choice visible at once" → collapse/radio.
2. Check daisyUI's catalog first — accordion, alert, avatar, badge, breadcrumbs, btn, card, chat, checkbox, collapse, countdown, diff, divider, dock, drawer, dropdown, fieldset, file-input, filter, footer, hero, indicator, input, join, kbd, label, link, list, loading, mask, menu, mockup-browser, mockup-code, modal, navbar, pagination, progress, radial-progress, radio, range, rating, select, skeleton, stat, steps, swap, table, tabs, textarea, theme-controller, timeline, toast, toggle, tooltip, tree.
3. Compose: component class + part classes + modifier classes (color/size/style).
4. Only then reach for utilities to adjust.

## The override ladder (in order)

1. **Utility class**: `btn px-10` — padding tweak.
2. **Important utility** (last resort): `btn bg-red-500!` — fights specificity; rare.
3. **Component variable**: many components expose CSS vars (radial-progress `--value`, countdown `--digits`).
4. **@utility directive** for global reshaping:

```css
@utility btn { @apply rounded-full; }
```

## Semantic color discipline

Utilities read theme variables: `bg-primary`, `text-base-content/60`, `border-base-300`. Opacity modifiers give the dim-scale free. Never `dark:` variants — the theme IS the mode on PageWeave (`data-theme` pinned, not OS-switched).

## Radius & size tokens

`rounded-box`, `rounded-field`, `rounded-selector` map to theme radius tokens — use them instead of hardcoded radii so components follow the theme's register.

## What NOT to do

- Don't add Tailwind/daisyUI CDN links — they're already included.
- Don't put `bg-base-100 text-base-content` on body unless overriding a theme mismatch.
- Don't mix icon sets; inline SVG or glyph characters.
- Don't rebuild what `join`, `swap`, `filter`, or `mockup-browser` already do.

## Testing matrix

Every themed build should screenshot: buttons (all variants), form controls, badges/alerts, tables, modal/dialog, and the markdown prose view — these exercise every token family.