Shader glass

FAQ with frosted cards over a band of blue light.

Usage

import { FaqShader } from '@/components/blocks/faq-02'


<FaqShader />


// Swap in your own content and shader palette
<FaqShader
  eyebrow="// Help"
  title="Questions, answered"
  description="Everything you need to know before getting started."
  type="multiple"
  defaultOpen={[0, 1]}
  items={[
    { question: 'Is there a free plan?', answer: 'Yes, free forever for small teams.' },
    { question: 'Can I cancel anytime?', answer: 'Of course, straight from billing settings.' },
  ]}
  color={[0.12, 0.37, 0.85]}
  highlight={[0.5, 0.7, 1]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/faq-02

npx shadcn@latest add @pastaui-pro/faq-02

yarn dlx shadcn@latest add @pastaui-pro/faq-02

bunx --bun shadcn@latest add @pastaui-pro/faq-02

Source

Props

Shader glass props
Prop	Type	Default	Description
eyebrow	string	= '// Quick answers'	Small label above the heading. Pass an empty string to hide it.
title	string	= 'Before you dive in'	Section heading.
description	string	= —	Optional supporting line under the heading.
items	FaqShaderItem[]	= Four onboarding questions	Question and answer pairs. Answers accept any ReactNode.
type	'single' \| 'multiple'	= 'single'	Whether opening a question closes the others.
defaultOpen	number \| number[]	= 0	Index or indexes of the questions open on first render.
color	[number, number, number]	= [0.17, 0.5, 1]	RGB base color of the shader light band, from 0 to 1.
highlight	[number, number, number]	= [0.56, 0.77, 1]	RGB color of the brightest streaks in the band, from 0 to 1.
speed	number	= 1	How fast the light band flows.
className	string	= —	Additional classes for the section.