Collapsible

A single unstyled disclosure.

An unstyled primitive that opens and closes one region. For a stack of headings, use Accordion.

export const client = "only";

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@squadbase/vantage/ui";
import { ChevronRight } from "lucide-react";

export default function Example() {
  return (
    <Collapsible className="w-80">
      <CollapsibleTrigger
        render={<Button variant="ghost" size="sm" className="w-full justify-start" />}
      >
        <ChevronRight className="transition-transform duration-200 data-open:rotate-90" />
        クエリの詳細
      </CollapsibleTrigger>
      <CollapsibleContent className="px-3 py-2 text-sm text-muted-foreground">
        直近 30 日・地域フィルタ適用済み・スキャン 1.2 GB
      </CollapsibleContent>
    </Collapsible>
  );
}

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@squadbase/vantage/ui";

Control it with open / defaultOpen / onOpenChange. Both the trigger and the panel get data-open while open, so the chevron can rotate in CSS alone.

<ChevronRight className="transition-transform data-open:rotate-90" />