Daisy

daisyUI components as Latte partials with one shared vocabulary.

On this page

Use

Every component is a partial in the @daisy alias. Every parameter is optional and has a default.

{include '@daisy/button.latte', title: 'Save'}
{include '@daisy/card.latte', title: 'Hello', icon: 'sparkles'}

Four tiers of control

Write daisyUI and Tailwind classes. A component brings its base class and nothing else, so class is the main way to style it.

  1. Defaults. Include the partial and pass nothing.
  2. Classes. Every component takes class and attrs. class is additive: it joins the base class and never replaces it. It lands on the element that carries the base class (the root, except for a form field, where it is the control, and modal, where it is .modal-box). attrs adds attributes to the same element (['hx-get' => ...]).
  3. A few common words. Only color, variant, size and icon are words (color: 'error', variant: 'outline', size: 'lg'), never daisyUI class names. Everything else, like a direction, a position or a shape, is a class: class: 'steps-vertical'.
  4. Override the template. site/views/@daisy/button.latte replaces the shipped one.

A component with a second styled part takes itemClass for it (rating, steps, indicator, join, accordion, tabs), avatar takes inner, and modal takes triggerClass for its open button.

One item vocabulary

Components that take a list (items) share one item shape: title, description, href, icon, meta, value, badges, color, active and nested items. items also accepts pages, a page collection or plain strings, so no mapping is needed:

{include '@daisy/menu.latte', items: $page->children()}
{include '@daisy/list.latte', items: $app->find('view=article, limit=4')}

Pages map through items() in DaisyExtension.php: title, description, url, an icon field if the page has one, created date, active and open state, and with depth: 2 their children.

Slots

A component with slots takes them through {embed}. navbar has {block brand} and {block end}, folds its menu into a dropdown below lg and keeps the open item highlighted. footer has {block end}. card takes an icon, and link: 'card' makes the whole card the link.

Tailwind

Classes you write in a template, or pass in class, are found by Tailwind like any other. color, variant and size compose class names (btn- + error), which it cannot see, so those are listed in the site's input.css as @source inline(...). A site that only uses a few colours can narrow those lines. A new component that composes a new class family needs a line there.