# Accordion: Ghost

> No borders. Triggers get a soft fill on hover and when open.

Example: https://hextaui.com/docs/accordion/examples/ghost
Component docs: https://hextaui.com/docs/accordion.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/accordion-ghost.json
```

This adds `components/examples/accordion/ghost.tsx` with the Accordion component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/accordion/ghost.tsx"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    value: "what",
    question: "What is HextaUI?",
    answer:
      "A collection of components built on top of shadcn/ui, with careful attention to structure and micro-interactions.",
  },
  {
    value: "install",
    question: "How do I install a component?",
    answer:
      "Copy the source into your project, then edit it like any other file you own.",
  },
  {
    value: "license",
    question: "Can I use it in commercial projects?",
    answer:
      "Yes. Every component is free and open source, for personal and commercial work.",
  },
]

export function AccordionGhost() {
  return (
    <Accordion
      variant="ghost"
      defaultValue={["what"]}
      className="w-full max-w-md"
    >
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

## Props in this example

### Accordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "separated" \| "ghost"` | `"default"` |  |
| `defaultValue` | `Value[]` | – |  |

### AccordionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – | Generated automatically when omitted. |

## More Accordion examples

- [Outline](https://hextaui.com/docs/accordion/examples/outline.md)
- [Separated](https://hextaui.com/docs/accordion/examples/separated.md)
- [Multiple](https://hextaui.com/docs/accordion/examples/multiple.md)
- [Disabled](https://hextaui.com/docs/accordion/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/accordion/examples/controlled.md)
- [Custom icon](https://hextaui.com/docs/accordion/examples/custom-icon.md)
- [Leading icons](https://hextaui.com/docs/accordion/examples/leading-icons.md)
- [Long content](https://hextaui.com/docs/accordion/examples/long-content.md)
- [Nested](https://hextaui.com/docs/accordion/examples/nested.md)
- [Right to left](https://hextaui.com/docs/accordion/examples/rtl.md)