UI

daisyUI components as Latte partials with one shared vocabulary.

On this page

Use

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

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

Four tiers of control

  1. Defaults. Include the partial and pass nothing.
  2. Semantic params. color, variant, size and icon take plain words (color: 'error', variant: 'outline', size: 'lg'), never daisyUI class names. color: null leaves a component uncoloured.
  3. Escape hatches. class adds raw classes to the root and attrs adds attributes (['hx-get' => ...]).
  4. Override the template. site/views/@ui/button.latte replaces the shipped one.

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 '@ui/menu.latte', items: $page->children()}
{include '@ui/list.latte', items: $app->find('view=article, limit=4')}

Pages map through items() in UiExtension.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

color, variant and size compose class names (btn- + error), which Tailwind cannot see in templates. The classes are listed in the site's input.css as @source inline(...). A new component that composes a new class family needs a line there.

Converted so far

button, alert, card, list, menu, dropdown, navbar, breadcrumbs, footer, stats, hero and toast use the vocabulary above. The remaining components still take their first-draft params.