Use `<Details>` for collapsible content sections. This component is globally available — no imports needed.

## Basic Usage

[Dynamic content unavailable in text export]

  This content is hidden by default and revealed when the user clicks the summary.



```mdx
<Details title="Click to expand">
This content is hidden by default and revealed when the user clicks the summary.
</Details>
```

## Default Title

When no `title` prop is provided, the summary text defaults to "Details".

[Dynamic content unavailable in text export]

  This collapsible section uses the default title.



```mdx
<Details>
This collapsible section uses the default title.
</Details>
```

## Rich Content

You can include any MDX content inside a `<Details>` block, including code blocks, lists, and other components.

[Dynamic content unavailable in text export]

  Here is a sample configuration: `export default { site: "https://example.com", output: "static" }`. Key points: the `site` field sets the base URL, the `output` field controls the build mode, all fields are optional with sensible defaults.



````mdx
<Details title="Configuration Example">
Here is a sample configuration:

```ts

export default {
  site: "https://example.com",
  output: "static",
};

```

Key points:

- The `site` field sets the base URL
- The `output` field controls the build mode
- All fields are optional with sensible defaults
</Details>
````

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | string | `"Details"` | The clickable summary text |