Verdant Support FAQ
A vibrant FAQ component designed for SaaS customer support and help centers.
Features
- 8 expandable accordion FAQ items with smooth CSS grid animations
- Search bar to filter questions by keyword
- Category filter pills: All, General, Billing, Technical, Account
- Color-coded category badges on each question
- Bright teal (#0D9488) primary with warm yellow (#FBBF24) accents
- Very light mint (#F0FDFA) light mode background
- Dark teal (#042F2E) dark mode background
- Empty state when no questions match the search
- Contact Support CTA at the bottom
- WCAG AA compliant color contrast
- Semantic HTML with aria-expanded, role attributes
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Add or remove FAQ items from the
faqs array
- Modify category names and colors in the
categoryColors map
- Swap teal (#0D9488) for your brand color
- Replace the search placeholder text
- Add new categories by extending the
categories array
- Connect the Contact Support button to your support system
