The neon-cyber component family: glows, borders and text.
Usage#
<div class="neon-card p-6"><p class="neon-text">CYBER</p></div>The classes#
| Class | Purpose |
|---|---|
neon-card | Glowing bordered card |
neon-btn | Button with neon glow |
neon-glow | Apply the glow to anything |
neon-text | Glowing text |
Compose with utilities#
<button class="neon-btn px-8 py-3 text-lg font-bold mt-6">Amplified</button>Customization#
Every component is built from theme tokens (colors, blur radii, shadows). Redefine tokens in your config and the whole family restyles. For structural changes, copy the rules into your own layer and edit freely.
Accessibility#
- Glow is decorative — never the only state signal
- Check glow contrast in light mode
Related#
components/index|Components hub · themes/index|Themes · recipes/index|Recipes