nuxt-x-affiliate
Divider Glow
Glowing hairline rule for separating dark sections.
Divider Glow
A hairline gradient rule with blurred copies stacked behind it. Reads best between dark sections.
Components
<XAFDividerGlow />
<XAFDividerGlow color="primary" intensity="strong" spacing="py-4" />
<!-- Any CSS colour also works -->
<XAFDividerGlow color="#f0abfc" intensity="subtle" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'primary' | A Nuxt UI theme colour, 'white', 'neutral', or any CSS colour |
spacing | string | 'py-16' | Vertical padding, as a Tailwind class |
intensity | 'none' | 'subtle' | 'medium' | 'strong' | 'medium' | How many blurred layers sit behind the line |
height | 'thin' | 'default' | 'thick' | 'default' | Thickness of the crisp line |
Tips
- Colour flows through inline styles referencing the theme's CSS variables, not
through composed class names. The marketing original built classes by
interpolation (
`via-${color}-500/50`); Tailwind scans source text for complete class names and never sees a string assembled at runtime, so every colour except a handful hardcoded elsewhere produced no gradient at all.
AI Context
component: XAFDividerGlow
package: "@xenterprises/nuxt-x-affiliate"
use-when: Glowing horizontal rule between dark sections