104Get started
HextaUI

Collapsible: Long content

Unbroken strings wrap inside the panel instead of widening the page.

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleLongContent() {
  return (
    <Collapsible className="flex w-72 max-w-full flex-col gap-2">
      <CollapsibleTrigger
        render={<Button variant="outline" />}
        className="justify-between"
      >
        Token
        <CollapsibleTriggerIcon data-icon="inline-end" />
      </CollapsibleTrigger>
      <CollapsibleContent className="font-mono text-sm wrap-anywhere">
        hx_demo_7Kq2vX9mLpR4tYw8NzB3cF6jHs1DgQe5UaV0iMoTnWbZrE2yPkLxJ4
      </CollapsibleContent>
    </Collapsible>
  )
}

Add this example

This adds the example as components/examples/collapsible/long-content.tsx, together with the Collapsible component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/collapsible-long-content.json

To add only the component, follow the Collapsible installation.

Props in this example

The Collapsible props this example sets, from the API reference.

CollapsibleTrigger

PropTypeDefault
renderUsually a Button.
ReactElement | (props, state) => ReactElement<button>

CollapsibleContent

PropTypeDefault
classNameApplied to the inner wrapper, so padding never fights the height animation.
string–

Every prop is in the Collapsible API reference.

More Collapsible examples

See them all, with keyboard support and accessibility notes, on the Collapsible page.

Related components