Details

import { Details } from "@ps1ui/core";

Basic

<Details summary="Components">
  Button, Anchor, Card, Checkbox…
</Details>

Open by default

<Details summary="Components" open>
  <Stack direction="column" gap="xs">
    <Anchor href="#anchor">Anchor</Anchor>
    <Anchor href="#button">Button</Anchor>
    <Anchor href="#card">Card</Anchor>
  </Stack>
</Details>

Exclusive accordion

<Stack direction="column" gap="sm">
  <Details name="faq" summary="Is this JS-free?">
    Yes — Details wraps the native disclosure element.
  </Details>
  <Details name="faq" summary="Does it hydrate?">
    No hydration is required.
  </Details>
</Stack>

Props