Tubelight Accordion

An accordion component with a unique "tubelight" flicker animation effect on sticky headers and content revelation.

Preview

Why don't I ever have brilliant ideas in meetings?

Installation

npx shadcn add https://dark-ui.vercel.app/r/tubelight-accordion.json

Usage

import TubelightAccordion from "@/components/tubelight-accordion";

export default function Example() {
  return (
    <TubelightAccordion
      question="What is the Tubelight effect?"
      answer="It mimics the flickering of an old fluorescent tube light before it fully turns on, adding a retro, industrial feel to the UI."
    />
  );
}

Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Custom class for the container.
`question`	`string`	`"Why..."`	The header/question text.
`answer`	`string`	`"Because..."`	The body/answer text.