# V collapsible 10

> Incident Status with Timeline

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-collapsible-10).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-collapsible-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-collapsible-10-light-79a5723b35f0395f.png
- Registry item: https://ui.cnippet.dev/r/v-collapsible-10.json
- Categories: collapsible
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-collapsible-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/collapsible`

## Files

### `registry/default/variants/v-collapsible-10.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey: <>

import { ChevronDownIcon, CircleAlertIcon } from "lucide-react";

import { Badge } from "@/registry/default/ui/badge";
import {
  Card,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/registry/default/ui/card";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/registry/default/ui/collapsible";
import { Separator } from "@/registry/default/ui/separator";

const timeline = [
  {
    message:
      "We are investigating reports of elevated API error rates affecting a subset of requests.",
    status: "investigating",
    time: "14:32 UTC",
  },
  {
    message:
      "The issue has been identified as a misconfigured load balancer rule following a routine deployment at 14:15 UTC.",
    status: "identified",
    time: "14:48 UTC",
  },
  {
    message:
      "A fix has been deployed and rolled out to all regions. Error rates are returning to normal. We are monitoring the situation.",
    status: "monitoring",
    time: "15:04 UTC",
  },
];

const statusVariant: Record<
  string,
  "warning" | "info" | "success" | "destructive"
> = {
  identified: "warning",
  investigating: "destructive",
  monitoring: "success",
  resolved: "success",
};

export function Pattern() {
  return (
    <div className="w-full max-w-md">
      <Card>
        <Collapsible defaultOpen>
          <CardHeader className="border-b pb-3">
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-start gap-2.5">
                <CircleAlertIcon className="mt-0.5 size-4 shrink-0 text-warning" />
                <div>
                  <CardTitle className="text-sm leading-snug">
                    Elevated API error rates
                  </CardTitle>
                  <p className="mt-0.5 text-muted-foreground text-xs">
                    Started May 25, 2025 · 14:32 UTC
                  </p>
                </div>
              </div>
              <Badge size="sm" variant="warning">
                Monitoring
              </Badge>
            </div>
            <CollapsibleTrigger className="mt-2 inline-flex items-center gap-1 text-muted-foreground text-xs transition-colors hover:text-foreground">
              View incident timeline
              <ChevronDownIcon className="size-3 in-data-panel-open:rotate-180 transition-transform duration-200" />
            </CollapsibleTrigger>
          </CardHeader>

          <CollapsiblePanel>
            <CardPanel className="py-3">
              <div className="relative">
                <div className="absolute top-0 bottom-0 left-1.75 w-px bg-border" />
                <div className="space-y-4">
                  {timeline.map((event, i) => (
                    <div className="relative flex gap-3" key={i}>
                      <div className="relative z-10 mt-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background">
                        <div
                          className={`size-1.5 rounded-full ${
                            i === timeline.length - 1
                              ? "bg-success"
                              : "bg-muted-foreground"
                          }`}
                        />
                      </div>
                      <div className="min-w-0 flex-1 space-y-1">
                        <div className="flex items-center gap-2">
                          <Badge
                            size="sm"
                            variant={statusVariant[event.status] ?? "outline"}
                          >
                            {event.status}
                          </Badge>
                          <span className="text-muted-foreground text-xs">
                            {event.time}
                          </span>
                        </div>
                        <p className="text-muted-foreground text-xs leading-relaxed">
                          {event.message}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <Separator className="mt-4 mb-3" />
              <p className="text-muted-foreground text-xs">
                Next update in{" "}
                <span className="font-medium text-foreground">12 minutes</span>.
              </p>
            </CardPanel>
          </CollapsiblePanel>
        </Collapsible>
      </Card>
    </div>
  );
}
```