Neon Glow Effects
A cyberpunk-styled FAQ grid with always-open cards, glowing borders and text shadows built entirely from semantic primary-color tokens, and a faint repeating scan-line overlay for a futuristic terminal feel.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/neon-glow-effects.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq64.tsx instead.
Usage
The file also exports faq64Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Faq64, faq64Demo } from "@/components/blocks/faq/faq64"; export default function Page() { return <Faq64 {...faq64Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | none | Small pill label above the heading. |
| heading | string | none | Section heading. |
| description | string | none | Section intro text. |
| items | FaqItem[] | none | Questions rendered as always-open glowing cards. |
| className | string | none | Extra classes for the outer section element. |
Types
type FaqItem = { question: string; answer: string; };
Behavior notes
- Plain server component: every card is always open (no accordion, no client state), matching a static reference-panel feel rather than an interactive FAQ.
- The neon glow is built entirely from semantic primary tokens (shadow-[0_0_20px] shadow-primary/20, ring-primary/30, [text-shadow:...]var(--primary)), never literal neon hex colors.
- The scan-line effect is a decorative, absolutely positioned repeating-linear-gradient overlay at very low opacity, purely cosmetic and non-interactive.
More FAQ Blocks
View all →collapsible-accordion
Collapsible Accordion
Stacked cards with expandable sections, for full-length answers in a compact format.
open-list-layout
Open List Layout
Questions with answers displayed directly below in a simple always-open list.
three-column-grid
Three Column Grid
Q&A pairs arranged in a responsive grid layout, always open.
tabbed-categories
Tabbed Categories
Sidebar navigation with category tabs and an accordion of that category's questions.
searchable-accordion
Searchable Accordion
Search input that filters accordion items in real-time by question and answer text.
grouped-sections
Grouped Sections
FAQs organized into titled sections, each with its own independent accordion below it.