Collapsible/collapsible-standard-

PreviousNext

A collapsible/collapsible-standard- example

Docs
shadcnblocksblock

Preview

Loading preview…
code/example/collapsible/collapsible-standard-3.tsx
import { Plus } from "lucide-react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export const title = "Collapsible with Icon";

const Example = () => (
  <Collapsible className="w-full max-w-lg space-y-2">
    <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:underline">
      <Plus className="h-4 w-4" />
      Show more information
    </CollapsibleTrigger>
    <CollapsibleContent className="space-y-2">
      <p className="text-sm text-muted-foreground">
        Additional details about this section can be found here.
      </p>
      <p className="text-sm text-muted-foreground">
        This content was hidden by default but can be revealed by clicking the
        trigger.
      </p>
    </CollapsibleContent>
  </Collapsible>
);

export default Example;

Installation

npx shadcn@latest add @shadcnblocks/collapsible-collapsible-standard-3

Usage

import { CollapsibleCollapsibleStandard3 } from "@/components/collapsible-collapsible-standard-3"
<CollapsibleCollapsibleStandard3 />