---
title: Details
description: Render styled native disclosure elements
type: reference
summary: Compose Details and Summary for accessible browser-native disclosures.
url: /docs/components/details
source: apps/template/content/docs/components/details.mdx
related:
  - /docs/components
  - /docs/components/collapsible
---

# Details

import { Details, Summary } from "@vercel/geistdocs/components/details";

<div className="not-prose my-6 min-h-32 rounded-lg border border-gray-400 bg-background-100 p-6">
  <Details open>
    <Summary>Advanced options</Summary>
    Configure optional behavior here.
  </Details>
</div>

```tsx
import { Details, Summary } from "@vercel/geistdocs/components/details";

export function Disclosure() {
  return (
    <Details>
      <Summary>Advanced options</Summary>
      Configure optional behavior here.
    </Details>
  );
}
```

`Details` and `Summary` are also included in the default MDX component map.