Renders an alert box. https://daisyui.com/components/alert/

Examples

<.alert color="info" style="soft" position="horizontal">
  This is an info alert.
</.alert>

Attributes

• tag (:string) - Defaults to "div".
• color (:string) - the alert color to use. Must be one of "error", "info", "success", or "warning".
• style (:string) - the alert style to use. Must be one of "dash", "outline", or "soft".
• direction (:string) - the alert position to use. Must be one of "horizontal", or "vertical".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. the arbitrary HTML attributes to add to the alert container.

Slots

• inner_block (required)

Renders an avatar. https://daisyui.com/components/avatar/

Examples

<.avatar status="online">
  <img src="user_avatar.png" alt="User Avatar" />
</.avatar>

<.avatar placeholder={true} status="offline">
  <span>AB</span>
</.avatar>

Attributes

• placeholder (:boolean) - Defaults to false.
• status (:string) - the status of the avatar. Must be one of "offline", or "online".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Container for grouping multiple avatars https://daisyui.com/components/avatar/#avatar-group

Examples

<.avatar_group>
  <.avatar>
    <img src="user1.png" alt="User 1" />
  </.avatar>
  <.avatar>
    <img src="user2.png" alt="User 2" />
  </.avatar>
  <.avatar>
    <img src="user3.png" alt="User 3" />
  </.avatar>
</.avatar_group>

Attributes

• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a badge. https://daisyui.com/components/badge/

Examples

<.badge color="primary" size="md">New</.badge>
<.badge color="success" style="outline" size="lg">Success</.badge>

Attributes

• color (:string) - the color of the badge. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• style (:string) - the style of the badge. Must be one of "dash", "ghost", "outline", or "soft".
• size (:string) - the size of the badge. Must be one of "lg", "md", "sm", "xl", or "xs".
• tag (:string) - Defaults to "span".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a button with navigation support. https://daisyui.com/components/button/

Examples

<.button>Send!</.button>
<.button phx-click="go" color="primary">Send!</.button>
<.button navigate={~p"/"}>Home</.button>

Attributes

• color (:string) - the button color to use. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the button size to use (xs, sm, md, lg, xl). Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - the button style to use (solid, outline, ghost, link). Must be one of "dash", "ghost", "link", "outline", or "soft".
• shape (:string) - the button shape to use. Must be one of "block", "circle", "square", or "wide".
• tag (:string) - Defaults to "button".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "name", "value", "disabled", "type"].

Slots

• inner_block (required)

Renders a card component. https://daisyui.com/components/card/

Examples

<.card size="md" style="border">
  <:title>Card Title</:title>
  Card content goes here.
  <:actions>
    <.button>Action 1</.button>
    <.button>Action 2</.button>
  </:actions>
</.card>

Attributes

• size (:string) - the size of the card. Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - the style of the card. Must be one of "border", or "dash".
• mod (:string) - the modifier of the card. Must be one of "image-full", or "side".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)
• title - Accepts attributes:
  • tag (:string)
  • class (:any)
• actions - Accepts attributes:
  • tag (:string)
  • class (:any)
• image - Accepts attributes:
  • tag (:string)
  • class (:any)
  • placement (:string)

Attributes

• color (:string) - the color of the checkbox. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the size of the checkbox. Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - the style of the checkbox. Must be one of "ghost".
• type (:string) - Defaults to "checkbox".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "checked", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "value", "name"].

Renders a collapse component. https://daisyui.com/components/collapse/

Examples

<.collapse open={true} icon="arrow">
  <:title>
    Click to Expand
  </:title>
  <:content>
    This is the hidden content that is revealed when the collapse is opened.
  </:content>
</.collapse>

<.collapse>
  <:title class="font-bold">
    Another Collapse
  </:title>
  More content here.
</.collapse>

Attributes

• open (:boolean) - Defaults to false.
• icon (:string) - the icon style of the collapse. Must be one of "arrow", or "plus".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block
• title (required) - Accepts attributes:
  • tag (:string)
  • class (:any)
• content - Accepts attributes:
  • tag (:string)
  • class (:any)

Renders a countdown component. https://daisyui.com/components/countdown/

Examples

<.countdown value={60} digits={2} />

Attributes

• value (:integer) (required)
• digits (:integer) - Defaults to 1.
• tag (:string) - Defaults to "span".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Renders a divider. https://daisyui.com/components/divider/

Examples

<.divider color="primary" position="vertical" />
<.divider color="accent" position="horizontal" placement="start" />

Attributes

• color (:string) - the color of the divider. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• direction (:string) - the position of the divider. Must be one of "horizontal", or "vertical".
• placement (:string) - the placement of the divider. Must be one of "end", or "start".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block

Renders a dock component. https://daisyui.com/components/dock/

Examples

<.dock size="md">
  <:button label="Home" active>
    <.icon name="hero-home" class="size-6" />
  </:button>
  <:button label="Search">
    <.icon name="hero-magnifying-glass" class="size-6" />
  </:button>
</.dock>

Attributes

• size (:string) - the size of the dock. Must be one of "lg", "md", "sm", "xl", or "xs".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• button (required) - Accepts attributes:
  • tag (:string)
  • active (:boolean)
  • label (:string) (required)

Attributes

• active (:boolean) - Defaults to false.
• label (:string) (required)
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["tag", "href", "navigate", "patch", "method", "download", "name", "value", "disabled", "type"].

Slots

• inner_block (required)

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page. https://daisyui.com/components/drawer/

Attributes

• placement (:string) - the placement of the drawer. Must be one of "end".
• open (:boolean) - whether the drawer is open by default. Defaults to false.
• toggleid (:string) - the id of the checkbox input controlling the drawer. Defaults to "drawer_toggle".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block
• side - Accepts attributes:
  • close_label (:string)
  • tag (:any)
  • class (:any)
• content - Accepts attributes:
  • tag (:any)
  • class (:any)

Renders a dropdown component. https://daisyui.com/components/dropdown/

Examples

<.dropdown horizontal="center" vertical="bottom">
  <:toggle>
    Toggle Dropdown
  </:toggle>
  <.menu>
    <.:item>Item 1</.:item>
    <.:item>Item 2</.:item>
  </.menu>
</.dropdown>

Attributes

• open (:boolean) - Defaults to false.
• horizontal (:string) - the horizontal alignment of the dropdown. Must be one of "center", "left", or "right".
• vertical (:string) - the vertical alignment of the dropdown. Must be one of "bottom", "middle", or "top".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)
• toggle (required) - Accepts attributes:
  • class (:any)
  • color (:string)
  • shape (:string)
  • size (:string)
  • style (:string)

Renders a fieldset with optional legend and label. https://daisyui.com/components/fieldset/

Examples

<.fieldset>
  <:legend>Personal Information</:legend>
  <.input field={@form[:name]} label="Name" />
</.fieldset>

Attributes

• tag (:string) - Defaults to "fieldset".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. the arbitrary HTML attributes to add to the fieldset.

Slots

• inner_block (required)
• legend - Accepts attributes:
  • tag (:string)
  • class (:any)
• label - Accepts attributes:
  • tag (:string)
  • class (:any)

Hero is a component for displaying a large box or image with a title and description. https://daisyui.com/components/hero/

Attributes

• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block
• content - Accepts attributes:
  • class (:any)
• overlay - Accepts attributes:
  • class (:any)

Renders a hover 3D effect wrapper. https://daisyui.com/components/hover-3d/

Examples

<.hover_3d class="w-32 h-32 bg-base-200 rounded-box flex items-center justify-center">
  Hover Me
</.hover_3d>

Attributes

• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an input field. https://daisyui.com/components/input/

Examples

<.input type="text" name="username" color="primary" size="md" />
<.input type="password" name="password" color="error" size="lg" style="ghost" />

Attributes

• color (:string) - the color of the input. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the size of the input. Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - the style of the input. Must be one of "ghost".
• tag (:string) - Defaults to "input".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "checked", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "name", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "type", "value"].

Slots

• inner_block

Renders a label component. https://daisyui.com/components/label/

Examples

<.label for="username">Username</.label>
<.label floating={true}>Email</.label>

Attributes

• floating (:boolean) - whether to use floating label style. Defaults to false.
• tag (:string) - Defaults to "label".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["for"].

Slots

• inner_block (required)

Renders a loading indicator. https://daisyui.com/components/loading/

Examples

<.loading style="spinner" size="md" />
<.loading style="dots" size="lg" />

Attributes

• style (:string) - the style of the loading indicator. Must be one of "ball", "bars", "dots", "ring", or "spinner".
• size (:string) - the size of the loading indicator. Must be one of "lg", "md", "sm", "xl", or "xs".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Renders a menu component. https://daisyui.com/components/menu/

Examples

<.menu size="md" direction="vertical">
  <:item title="Home" />
  <:item title="About" />
  <:item title="Contact" />
</.menu>

Attributes

• size (:string) - the size of the menu. Must be one of "lg", "md", "sm", "xl", or "xs".
• direction (:string) - the direction of the menu. Must be one of "horizontal", or "vertical".
• tag (:string) - Defaults to "ul". Must be one of "ul", or "ol".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• item (required) - Accepts attributes:
  • title (:string)
  • disabled (:boolean)
  • class (:any)

Attributes

• disabled (:boolean) - Defaults to false.
• title (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block

Modal is used to show a dialog or a box when you click a button. https://daisyui.com/components/modal/

Examples

<.modal vertical="middle" horizontal="end" open={true}>
  <h3 class="font-bold text-lg">Congratulations!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to our service for free!</p>
  <:action>
    <.button>Yay!</.button>
  </:action>
</.modal>

Attributes

• vertical (:string) - the vertical alignment of the modal. Must be one of "bottom", "middle", or "top".
• horizontal (:string) - the horizontal alignment of the modal. Must be one of "end", or "start".
• open (:boolean) - whether the modal is open. Defaults to false.
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block
• box - Accepts attributes:
  • tag (:any)
  • class (:any)
• action - Accepts attributes:
  • tag (:any)
  • class (:any)
• backdrop - Accepts attributes:
  • tag (:any)
  • class (:any)

Renders a progress bar component. https://daisyui.com/components/progress/

Examples

<.progress value={40} max={100} color="primary" />

Attributes

• color (:string) - the color of the progress bar. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["value", "max"].

Renders a radio input component. https://daisyui.com/components/radio/

Examples

<.radio color="primary" size="md" />

Attributes

• color (:string) - the color of the radio input. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the size of the radio input. Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - the style of the radio input. Must be one of "ghost".
• type (:string) - Defaults to "radio".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "checked", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "value", "name"].

Renders a range input component. https://daisyui.com/components/range/

Examples

<.range color="primary" size="md" />

Attributes

• color (:string) - the color of the range input. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the size of the range input. Must be one of "lg", "md", "sm", "xl", or "xs".
• type (:string) - Defaults to "range".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "checked", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "value"].

Renders a styled select input. https://daisyui.com/components/select/

Examples

<.select name="my-select" options={[{"One", 1}, {"Two", 2}]} value={1} class="my-class">
  <:option value={1} selected>One</:option>
  <:option value={2}>Two</:option>
</.select>

<.select
  name="my-select"
  value={2}
  color="primary"
  size="lg"
  style="ghost"
>
  <:option value={1}>One</:option>
  <:option value={2} selected>Two</:option>
</.select>

Attributes

• color (:string) - Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - Must be one of "ghost".
• tag (:string) - Defaults to "select".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "autofocus", "disabled", "form", "multiple", "name", "required", "size", "value"].

Slots

• inner_block
• option - Accepts attributes:
  • value (:any)
  • selected (:boolean)

Attributes

• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• title (required) - Accepts attributes:
  • tag (:string)
  • class (:any)
• value - Accepts attributes:
  • tag (:string)
  • class (:any)
• figure - Accepts attributes:
  • tag (:string)
  • class (:any)
• desc - Accepts attributes:
  • tag (:string)
  • class (:any)

Renders a stats component. https://daisyui.com/components/stats/

Examples

<.stats position="horizontal">
  <:stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
  <:stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
  <:stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
</.stats>

Attributes

• direction (:string) - the direction of the stats. Must be one of "horizontal", or "vertical".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block
• stat - Accepts attributes:
  • title (:string) (required)
  • value (:string)
  • desc (:string)
  • tag (:string)
  • class (:any)

Renders a swap component. https://daisyui.com/components/swap/

Examples

<.swap active style="flip">
  <:on>
    <.icon name="hero-moon" class="size-6" />
  </:on>
  <:off>
    <.icon name="hero-sun" class="size-6" />
  </:off>
</.swap>

Attributes

• active (:boolean) - Defaults to false.
• style (:string) - the style of the swap. Must be one of "flip", or "rotate".
• tag (:string) - Defaults to "span".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• on (required)
• off (required)

Attributes

• active (:boolean) - Defaults to false.
• tag (:string) - Defaults to "a".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a tabs component. https://daisyui.com/components/tabs/

Examples

<.tabs size="md" placement="top" style="border">
  <:tab active>
    Tab 1
  </:tab>
  <:tab>
    Tab 2
  </:tab>
  <:tab>
    Tab 3
  </:tab>
</.tabs>

Attributes

• size (:string) - the size of the tabs. Must be one of "lg", "md", "sm", "xl", or "xs".
• placement (:string) - the placement of the tabs. Must be one of "bottom", or "top".
• style (:string) - the style of the tabs. Must be one of "border", "box", or "lift".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• tab (required) - Accepts attributes:
  • tag (:string)
  • class (:any)
  • active (:boolean)
  • href (:any)
  • patch (:any)
  • navigate (:any)

Renders a styled textarea input. https://daisyui.com/components/textarea/

Examples

<.textarea name="my-textarea" value="Hello!" class="my-class" />
<.textarea name="my-textarea" value="Hello!" color="primary" size="lg" style="ghost" />

Attributes

• value (:any) - Defaults to nil.
• color (:string) - Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - Must be one of "lg", "md", "sm", "xl", or "xs".
• style (:string) - Must be one of "ghost".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "cols", "dirname", "disabled", "form", "maxlength", "minlength", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "wrap"].

Slots

• inner_block

Renders a toast container. https://daisyui.com/components/toast/

Examples

<.toast horizontal="end" vertical="top">
  <div class="alert alert-success">
    <div>
      <span>Operation successful!</span>
    </div>
  </div>
</.toast>

Attributes

• horizontal (:string) - the horizontal alignment of the toast. Must be one of "center", "end", or "start".
• vertical (:string) - the vertical alignment of the toast. Must be one of "bottom", "middle", or "top".
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a toggle input component. https://daisyui.com/components/toggle/

Examples

<.toggle color="primary" size="md" />

Attributes

• color (:string) - the color of the toggle. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• size (:string) - the size of the toggle. Must be one of "lg", "md", "sm", "xl", or "xs".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "checked", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "value", "name"].

Renders a tooltip. https://daisyui.com/components/tooltip/

Examples

<.tooltip tip="This is a tooltip">
  <button class="btn">Hover me</button>
</.tooltip>

<.tooltip tip="Always visible tooltip" open color="info" orientation="right">
  <.icon name="hero-information-circle" class="size-5" />
</.tooltip>

Attributes

• color (:string) - the color of the tooltip. Must be one of "accent", "error", "info", "neutral", "primary", "secondary", "success", or "warning".
• placement (:string) - the placement of the tooltip. Must be one of "bottom", "left", "right", or "top".
• tip (:string) (required)
• open (:boolean) - whether the tooltip is open by default. Defaults to false.
• tag (:string) - Defaults to "div".
• class (:any) - Defaults to nil.
• overrideclass (:any)
• Global attributes are accepted.

Slots

• inner_block (required)