Components

FAQ

An FAQ styled as a message thread, with each answer sent as a reply bubble.

Dependencies

motion

Interaction Type

Click a question to open its answer, and click it again to close it. Arrow keys move between questions.

Props

Options you can pass to customize this component.

Prop
Type
Description
items*
FaqItem[]

The questions, each one an id, a question, and an answer.

value
stringnull

Id of the open question. Pass this to control which one is open.

defaultValue
stringnull

Id of the question open on first render.

onValueChange
(value: string | null) => void

Called with the open id, or null, every time a question opens or closes.

accent
string

Any CSS color for the answer bubbles.

avatar
ReactNode

Your logo or image, shown in a circle beside each answer. Pass null to hide it.

className
string

Extra classes merged onto the root element (data-slot="faq").

Installation

npx shadcn@latest add swamimalode07/rare-ui/faq

How to use

"use client"


import { Faq } from "@/components/ui/faq"


export function Demo() {
  return (
    <Faq
      items={[
        {
          id: "free",
          question: "Is it free?",
          answer: "Yes, for personal and commercial projects.",
        },
        {
          id: "install",
          question: "How do I install a component?",
          answer: "Add it with the shadcn CLI.",
        },
      ]}
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link back to rareui.com, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Rare UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
FAQ
A collection of animated React components built with Tailwind CSS and Motion. You copy the source into your project and own it from there.