Auras

API Docs

Auras wrap any component with an animated border light effect that rotates around the element. The effect is pure CSS — the aura renders in the wrapper's text color (currentColor), so you can tint it with any Tailwind text-* utility.

Basic Aura

By default, the aura draws a single rotating light in the current text color around whatever you place inside it.

Preview

This card has aura!

Code

= daisy_aura do
  = daisy_card(css: "bg-base-100") do
    %p This card has aura!

Aura Variants

Style modifiers change the light pattern: aura-dual adds a second light, aura-rainbow, aura-holo, aura-gold, and aura-silver apply preset color schemes, and aura-glow pulses in place instead of rotating.

Preview

aura-dual

aura-rainbow

aura-holo

aura-gold

aura-silver

aura-glow

Code

.grid.grid-cols-2.md:grid-cols-3.gap-6
  - %w[aura-dual aura-rainbow aura-holo aura-gold aura-silver aura-glow].each do |variant|
    = daisy_aura(css: variant) do
      = daisy_card(css: "bg-base-100") do
        %p.font-mono.text-sm= variant

Aura Sizes

Size modifiers control how far the light extends beyond the content, from aura-xs (flush) to aura-xl.

Preview

aura-xs

aura-sm

aura-md

aura-lg

aura-xl

Code

.flex.flex-wrap.items-center.gap-6
  - %w[aura-xs aura-sm aura-md aura-lg aura-xl].each do |size|
    = daisy_aura(css: size) do
      = daisy_badge(title: size, css: "badge-neutral badge-lg")

Aura Around a Button

Wrap a button to make a call-to-action impossible to miss.

Preview

Code

= daisy_aura(css: "aura-rainbow") do
  = daisy_button(title: "Highlighted Action", css: "btn-primary")

Custom Colors

The default aura renders in currentColor, so a Tailwind text-* utility on the aura changes the light's color without affecting the content inside (which sets its own colors).

Preview

text-orange-600

text-sky-500

text-fuchsia-500

Code

.flex.flex-wrap.gap-6
  - %w[text-orange-600 text-sky-500 text-fuchsia-500].each do |color|
    = daisy_aura(css: color) do
      = daisy_card(css: "bg-base-100 text-base-content") do
        %p.font-mono.text-sm= color

Clickable Aura

Passing an href: renders the wrapper as an <a> tag, making the whole aura-wrapped element one clickable control.

Preview

Click to view pricing

Code

= daisy_aura(href: "#", css: "aura-gold cursor-pointer") do
  = daisy_card(css: "bg-base-100") do
    %p Click to view pricing

Made with by Profoundry .

Auras

Basic Aura

Aura Variants

Aura Sizes

Aura Around a Button

Custom Colors

Clickable Aura

Docs

Guides

Loco

Daisy