FAQ Section

Layout

Frequently Asked Questions with accordion-style expandable answers.

Import

import { 
  PixelFaq,
  PixelFaqList,
  PixelFaqItem,
  PixelFaqQuestion,
  PixelFaqAnswer,
  PixelFaqHeader,
  PixelFaqSectionTitle,
  PixelFaqSectionDescription,
  PixelFaqCategory,
  PixelFaqCategoryTitle
} from "@/components/ui/pixel/pixel-faq"

Usage

You can install components by copying the code from our docs or via npm.
Yes! All components are completely free and open source.
Absolutely! All components support className prop for easy customization.

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-faq.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelFaqVariants = cva("relative w-full", {
  variants: {
    variant: {
      default: "bg-[#f5f5dc] dark:bg-[#1a1a1a]",
      primary: "bg-[#ff8c00] text-white",
      secondary: "bg-[#ffd700] text-black",
      dark: "bg-black text-white",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface PixelFaqProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelFaqVariants> {
  children?: React.ReactNode;
}

const PixelFaq = React.forwardRef<HTMLDivElement, PixelFaqProps>(
  ({ className, variant, children, ...props }, ref) => {
    return (
      <section
        ref={ref}
        className={cn(
          pixelFaqVariants({ variant }),
          "py-16 md:py-24",
          className,
        )}
        {...props}
      >
        <div className="container mx-auto px-4 max-w-4xl">{children}</div>
      </section>
    );
  },
);
PixelFaq.displayName = "PixelFaq";

const PixelFaqList = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("space-y-4", className)} {...props}>

// ... (more code below)

Props

PropTypeDefaultDescription
variant"default" | "primary" | "secondary" | "dark""default"FAQ section visual style
defaultOpenbooleanfalseWhether the FAQ item is open by default

Examples

Basic FAQ

Simple accordion-style FAQ

You can install components by copying the code from our docs or via npm.
Yes! All components are completely free and open source.
Absolutely! All components support className prop for easy customization.

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.