Details

When you want to provide additional information in context, but you do not want it to clutter up the more important content, use <Details> to add a collapsible container.

Open me!

Hello, world!

import { Details } from "~/components"

<Details header="Open me!">
    Hello, world!
</Details>

You can specify the default configuration of each instance of the <Details> component (that is, whether it is open or closed by default).

Close me!

Long piece of code example.

import { Details } from "~/components"

<Details header="Close me!" open = {true}>
    Long piece of code example.
</Details>