A few things you might be wondering.

The details, without the guesswork.

How do I get started?

Choose a component, follow its installation steps, and add it to your page. Start small and make it your own.

Can I customize the design?

Yes. Update the content, adjust the Tailwind classes, and use your own theme tokens. The source lives in your project.

Does it work on smaller screens?

The layout adapts to the space available. Questions wrap naturally, and answers remain readable on phones and tablets.

Can answers include more than text?

Absolutely. Pass React content to include links, lists, images, or other components in an answer.

FAQ Cards

Frequently asked questions presented as individual bordered cards.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/faq-cards.json

Usage

tsx

import { FaqCards } from "@/components/hangry-ui/blocks/faq-cards";

<FaqCards />

<FaqCards
  title="Good questions. Clear answers."
  description="Everything you need to know before getting started."
  defaultOpenId="customize"
  items={[
    { id: "customize", question: "Can I use my own content?", answer: "Yes. Replace the questions and answers with your own." },
    { id: "support", question: "Where can I find help?", answer: <a href="/contact" className="underline">Contact our team</a> },
  ]}
/>

Props

title: Section heading.
description: Supporting text. Pass an empty string to omit it.
items: Questions with unique id, question, and React answer content.
multiple: Allow more than one answer to stay open. Defaults to false.
defaultOpenId: The question to open initially. Defaults to none.
className: Additional classes on the section. Native section attributes are forwarded.

Setup notes

Uses native details and summary elements, so keyboard activation, open state, and single-open grouping work without client-side state. Enter or Space toggles a focused question. Links and other controls in answers retain their normal behavior. Each FAQ instance has a unique group name.

Typography and colors follow the shared tokens. The layout adapts to narrow containers. This memoized block is server-compatible, with no animation dependency. The shared FAQ implementation is included during installation.