Aura
Conic-gradient animated border edge for containers. Requires a solid background color on the container.
Notes
- The container must have a solid background color for the aura edge to be visible.
aura-* sets both border width (integer) and theme color simultaneously, e.g. aura-3
(3px + primary), aura-primary (default 1px + primary color).aura-size-* controls border width only, without affecting color.- Color scheme utilities (
aura-mono-*, aura-duotone, aura-tritone,
aura-multi) build upon the base color set by aura-* or aura-mono-*.
Base
Default aura (1px, primary color)
Default aura
Theme colors
Primary
Success
Warning
Error
Title
Description
Caption
Animation
aura-spinner (3s)
Spin 3s
aura-spinner-* (custom duration)
Multiple time formats are supported:
- 1. Integer value, e.g.
*-100 (100ms)
- 2. Bracketed integer, e.g.
*-[100] (100ms)
- 3. Bracketed time string, e.g.
*-[100ms], *-[2s]
1s
5s
2s
Color schemes
Mono (single color)
Mono primary
Mono error
3px + spin
Duotone (base + 120° offset)
Duotone primary
Duotone + spin
Duotone custom color
Duotone success
Duotone error
Tritone (base + 80° offset ×2)
Tritone primary
Tritone + spin
Tritone custom color
Tritone warning
Tritone highlight
Multi (6-color rainbow)
Multi primary
Multi + spin
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Single custom color
[orange]
green-600 var
Multi custom stops
RGB
Custom hex
Size
Size + color combined: aura-*
3px + primary
5px + primary
8px + primary
3px + duotone
Size only: aura-size-*
3px
5px
8px
12px
16px
3px + mono + spin
Card examples
Primary card
Mono primary edge
Duotone card
Duotone gradient edge
Tritone card
Tritone spinning edge
Multi card
Fast multi-color spin