Neon Sign
A full sign: acrylic backplate, standoffs, frame tube, cable and a power switch with flicker profiles.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/neon-sign.jsonUsage
import { NeonSign } from "@/components/ui/neon-sign"
<NeonSign
frame="rounded"
cable="right"
lines={["OPEN", { text: "late", color: "pink", className: "text-[0.5em]" }]}
/>Examples
Script
Signs look best in a monoline face. This one pulls Neonderthaw from Google Fonts with a stylesheet link; next/font, Tilt Neon or Sacramento work as well.
Dying letter
flicker="dying" keeps one letter unreliable. dyingLetter picks which one.
Flicker profiles
How each profile catches when the power comes on.
Status light
Without the plate it's just the tubes, small enough for a toolbar.
API reference
NeonSign
Also accepts native div attributes; the ref points at the root.
| Prop | Type | Default |
|---|---|---|
lines | NeonSignLine[]One tube per line. Strings, or objects with their own color and className. | None |
children | ReactNodeA string works like lines (\n splits them). Other content, such as an SVG drawn with currentColor strokes, lights as one tube. | None |
on | booleanLit or dark. Turning it on replays the flicker profile; off leaves unlit glass. | true |
color | NeonColorFrame, plate edge and any line without its own color. Falls back to --neon-accent, then cyan. | inherited |
frame | "none"A tube bent around the lettering, with tube supports and electrode boots. | "none" |
backplate | booleanClear acrylic plate with four standoffs behind the tubes. | true |
cable | "left"The power lead, leaving the plate on that side. Adds a 2.2em bottom margin for it to hang into. | false |
flicker | "clean"clean strikes at once, stutter catches letter by letter, dying does that and keeps one letter unreliable. | "stutter" |
dyingLetter | numberIndex of the dying letter, counted across lines with spaces skipped. Picked from the text when omitted. | None |
buzz | booleanEvery few seconds a random letter dips, like an ageing transformer. | false |
size | "sm"Letter height. Everything else (plate, standoffs, glow) scales in em with it. | "md" |
NeonSignLine
A string, or an object:
| Prop | Type | Default |
|---|---|---|
text | stringThe tube's lettering. Whitespace is kept; lines never wrap. | None |
color | NeonColorThis line's tube color. | None |
className | stringPer-line font, size (use em so it scales with the sign), tracking or margin. | None |
Accessibility
- Screen readers get the text of all lines once; the lit and unlit copies of each letter are hidden from them.
- Under reduced motion the sign lights without flickering, buzz is skipped, and a dying letter stays dark.
- Looks best with a monoline face such as Tilt Neon. Pass it through className or style; the component sets no font.
- The glow and the wall wash spill past the sign's box, so give it room and avoid overflow-hidden right around it.