# Collapsible Faq 1 - FAQ Item

> FAQ Item using shadcn Collapsible for FAQ layout.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/collapsible-collapsible-faq-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/collapsible-collapsible-faq-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/collapsible-collapsible-faq-1-light-f6601c79bc249231.png
- Registry item: https://shadcnblocks.com/r/collapsible-collapsible-faq-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/collapsible-collapsible-faq-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `collapsible`

## Files

### `example/collapsible/collapsible-faq-1.tsx`

```tsx
import { Plus } from "lucide-react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export const title = "FAQ Item";

const Example = () => (
  <Collapsible className="w-full max-w-lg border-b pb-4">
    <CollapsibleTrigger className="flex w-full items-start justify-between gap-4 text-left">
      <h3 className="text-sm font-medium">
        How do I get started with this product?
      </h3>
      <Plus className="mt-0.5 h-4 w-4 shrink-0" />
    </CollapsibleTrigger>
    <CollapsibleContent className="pt-2 text-sm text-muted-foreground">
      Getting started is easy! Simply sign up for an account, verify your email,
      and follow our interactive onboarding guide. You'll be up and running in
      just a few minutes.
    </CollapsibleContent>
  </Collapsible>
);

export default Example;
```