Collapsible

 1import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/wensity/collapsible";
 2
 3export default function Example() {
 4  return (
 5    <Collapsible variant="card" defaultOpen>
 6      <CollapsibleTrigger>
 7        <div className="flex flex-1 items-center justify-between">
 8          <span>Order #1842</span>
 9          <span className="text-xs font-normal text-[var(--muted-foreground)]">Shipped</span>
10        </div>
11      </CollapsibleTrigger>
12      <CollapsibleContent>
13        <div className="flex items-center justify-between text-sm text-[var(--muted-foreground)]">
14          <span>2× Wireless Keyboard</span>
15          <span className="text-[var(--foreground)]">$158.00</span>
16        </div>
17      </CollapsibleContent>
18    </Collapsible>
19  );
20}

 1import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/wensity/collapsible";
 2
 3export default function Example() {
 4  return (
 5    <Collapsible variant="section" defaultOpen>
 6      <CollapsibleTrigger>
 7        <div className="flex flex-col gap-0.5">
 8          <span className="text-[15px] font-medium">Notifications</span>
 9          <span className="text-xs font-normal text-[var(--muted-foreground)]">
10            Choose what you get notified about
11          </span>
12        </div>
13      </CollapsibleTrigger>
14      <CollapsibleContent>
15        <p className="text-sm text-[var(--muted-foreground)]">Product updates: On</p>
16      </CollapsibleContent>
17    </Collapsible>
18  );
19}

 1import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/wensity/collapsible";
 2import { IconFile, IconFolder } from "@tabler/icons-react";
 3
 4export default function Example() {
 5  return (
 6    <Collapsible variant="sidebar" defaultOpen>
 7      <CollapsibleTrigger>
 8        <div className="flex items-center gap-2">
 9          <IconFolder className="size-4 text-[var(--muted-foreground)]" stroke={1.75} />
10          <span>lib</span>
11        </div>
12      </CollapsibleTrigger>
13      <CollapsibleContent>
14        <div className="flex items-center gap-2.5 rounded-full px-3 py-2 text-[14px] text-[var(--muted-foreground)]">
15          <IconFile className="size-4" stroke={1.75} />
16          <span>utils.ts</span>
17        </div>
18      </CollapsibleContent>
19    </Collapsible>
20  );
21}

 1import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/wensity/collapsible";
 2
 3export default function Example() {
 4  return (
 5    <div className="flex h-[240px] w-full max-w-md items-end">
 6      <Collapsible variant="preview" previewHeight={96} className="w-full">
 7        <CollapsibleContent className="rounded-2xl border border-zinc-200/80 bg-white p-5 dark:border-white/[0.06] dark:bg-[#0c0c0e]">
 8          <p className="text-sm leading-relaxed text-[var(--muted-foreground)]">
 9            Our platform gives teams a single source of truth for design and code...
10          </p>
11        </CollapsibleContent>
12        <CollapsibleTrigger
13          hideIcon
14          className="w-auto rounded-md px-0 py-1 text-sm font-semibold underline-offset-4 hover:underline focus-visible:underline"
15        >
16          {({ open }) => (
17            <span>{open ? "Show less" : "Show more"}</span>
18          )}
19        </CollapsibleTrigger>
20      </Collapsible>
21    </div>
22  );
23}