Django Aura Component

Aura wraps any element in an animated, rotating conic-gradient glow. Drop a button, card, badge, or input inside and Aura matches its corner radius automatically. Pick a colour style with variant and the spread with size.

Basic Aura

Preview

Code

<div class="flex flex-wrap items-center gap-6 p-6">
  <c-lb.aura>
    <c-lb.button variant="primary">Default</c-lb.button>
  </c-lb.aura>
  <c-lb.aura variant="dual">
    <c-lb.button variant="primary">Dual</c-lb.button>
  </c-lb.aura>
</div>

Variants

Preview

Code

<div class="flex flex-wrap gap-6 p-6">
  <c-lb.aura><c-lb.button>Default</c-lb.button></c-lb.aura>
  <c-lb.aura variant="dual"><c-lb.button>Dual</c-lb.button></c-lb.aura>
  <c-lb.aura variant="rainbow"><c-lb.button>Rainbow</c-lb.button></c-lb.aura>
  <c-lb.aura variant="holo"><c-lb.button>Holo</c-lb.button></c-lb.aura>
  <c-lb.aura variant="gold"><c-lb.button>Gold</c-lb.button></c-lb.aura>
  <c-lb.aura variant="silver"><c-lb.button>Silver</c-lb.button></c-lb.aura>
  <c-lb.aura variant="glow"><c-lb.button>Glow</c-lb.button></c-lb.aura>
</div>

Sizes

Preview

Code

<div class="flex flex-wrap items-center gap-6 p-6">
  <c-lb.aura variant="dual" size="xs"><c-lb.button size="sm">xs</c-lb.button></c-lb.aura>
  <c-lb.aura variant="dual" size="sm"><c-lb.button size="sm">sm</c-lb.button></c-lb.aura>
  <c-lb.aura variant="dual" size="md"><c-lb.button size="sm">md</c-lb.button></c-lb.aura>
  <c-lb.aura variant="dual" size="lg"><c-lb.button size="sm">lg</c-lb.button></c-lb.aura>
  <c-lb.aura variant="dual" size="xl"><c-lb.button size="sm">xl</c-lb.button></c-lb.aura>
</div>

Around a Card

Preview

Pro plan

Everything you need to ship.

Code

<div class="p-6">
  <c-lb.aura variant="holo" size="lg">
    <c-lb.card class="bg-base-100 w-72">
      <c-lb.card.body>
        <c-lb.card.title>Pro plan</c-lb.card.title>
        <p class="text-sm text-base-content/60">Everything you need to ship.</p>
      </c-lb.card.body>
    </c-lb.card>
  </c-lb.aura>
</div>

API Reference

`c-lb.aura`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	dual rainbow holo gold silver glow	-	No	Glow colour style
size	xs sm md lg xl	`md`	No	Glow spread size