Details

Collapsible content sections using the HTML details/summary pattern.

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

Basic Usage

<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”.

<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.

<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