Staaarter

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.

By Staaarter Team
FAQ
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
badgestringnoneSmall pill label above the heading.
headingstringnoneSection heading.
descriptionstringnoneSection intro text.
itemsFaqItem[]noneQuestions rendered as always-open glowing cards.
classNamestringnoneExtra 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.