Klarhimmel UI
Klarhimmel ↗

Collapsible

Stable

One button that shows or hides extra content below it.

npx shadcn add @klarhimmel/collapsible

When to use

  • Use for

    One optional region the person can open: a policy, advanced options.

  • Not for

    A list of regions. Use Accordion.

  • Pairs with

    Text, Field, Card.

Preview

collapsible.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Collapsible } from '@/components/klarhimmel/ui/collapsible';

export default function Example() {
  return (
    <Theme theme="brand">
      <Collapsible title="Show the cancellation policy">
        Free until 48 hours before arrival.
      </Collapsible>
    </Theme>
  );
}

Install

Import

import { Collapsible } from '@/components/klarhimmel/ui/collapsible';
Lands in
components/klarhimmel/ui/collapsible.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Controlled

    Price, rooms, dates and distance to the beach.

    import { useState } from 'react';
import { Button } from '@/components/klarhimmel/ui/button';
import { Collapsible } from '@/components/klarhimmel/ui/collapsible';

export default function CollapsibleControlled() {
  const [open, setOpen] = useState(true);
  return (
    <div className="flex w-[min(28rem,calc(100cqw-3rem))] flex-col items-start gap-3">
      <Collapsible title="Filters" open={open} onOpenChange={setOpen}>
        <p>Price, rooms, dates and distance to the beach.</p>
      </Collapsible>
      <Button variant="ghost" size="sm" onClick={() => setOpen((o) => !o)}>{open ? 'Hide from outside' : 'Show from outside'}</Button>
    </div>
  );
}

  • Disabled

    Shown, and it can be hidden.
    import { Collapsible } from '@/components/klarhimmel/ui/collapsible';

export default function CollapsibleDisabled() {
  return (
    <div className="flex w-[min(28rem,calc(100cqw-3rem))] flex-col gap-3">
      <Collapsible title="Open from the start" defaultOpen>Shown, and it can be hidden.</Collapsible>
      <Collapsible title="Not available while booking is closed" disabled>Hidden.</Collapsible>
    </div>
  );
}

API reference

PropTypeDefaultDescription
titleReactNode-Required. The button text, always visible.
open / defaultOpen / onOpenChangeboolean / (open: boolean) => void-Controlled or uncontrolled state.
disabledbooleanfalseThe button does nothing.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
Enter / SpaceOpens or closes the region
TabMoves focus; the ring is always visible
Accessibility