Loading...
Installation
Usage
import StaggeredFAQSection from "@/components/ruixen/staggered-faq-section";
const faqItems = [
{
id: "item-1",
question: "What is Ruixen UI?",
answer:
"Ruixen UI is a modern, fully responsive design system that provides pre-built components, utilities, and layouts to help developers build scalable web applications quickly and efficiently.",
},
// Add more FAQ items...
];
export default function MyFAQs() {
return <StaggeredFAQSection faqItems={faqItems} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "StaggeredFAQSection" | The main heading text |
subtitle | string | "Everything you need to know about Ruixen UI" | The subtitle text below the heading |
supportText | string | "Can't find what you're looking for? Reach out to our" | Text shown before the support link |
supportLink | string | "#" | URL for the support link |
supportLinkText | string | "Ruixen UI support team" | Text for the support link |
faqItems | FAQItem[] | - | Array of FAQ items to display |
className | string | - | Additional CSS classes |
hideSupport | boolean | false | Whether to hide the support text and link |
FAQ Item Structure
Each FAQ item should have the following structure:
interface FAQItem {
id: string; // Unique identifier for the FAQ item
question: string; // The question text
answer: string; // The answer text
}Features
- Responsive Design: Adapts to different screen sizes with a mobile-first approach
- Animated Text: Uses BlurredStagger component for smooth text animations
- Collapsible: Built on shadcn/ui Accordion component for smooth expand/collapse
- Customizable: All text content, links, and styling can be customized
- Accessible: Follows accessibility best practices with proper ARIA attributes
- Dark Mode: Supports both light and dark themes
Examples
Basic Usage
<StaggeredFAQSection faqItems={faqItems} />Custom Title and Subtitle
<StaggeredFAQSection
title="Help Center"
subtitle="Find answers to common questions"
faqItems={faqItems}
/>Hide Support Section
<StaggeredFAQSection faqItems={faqItems} hideSupport={true} />Custom Support Link
<StaggeredFAQSection
faqItems={faqItems}
supportText="Need more help? Contact our"
supportLink="/contact"
supportLinkText="customer support team"
/>