Buttons

Data Display

Feedback

Forms

Layout

Media

Navigation

Overlays

Pickers

Sheet

A flyout that opens from the side of the screen, based on the dialog component. Built with Base UI and Tailwind CSS. Copy-paste ready.

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open Sheet
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Margaret Welsh" type="text" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
            <Button type="submit">Save</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Installation


pnpm dlx shadcn@latest add @cnippet/sheet

The SheetPanel component automatically wraps its content in a ScrollArea component. This means that if the content exceeds the sheet's maximum height, it will become scrollable automatically. The scrollbar will appear when needed, providing a smooth scrolling experience.

<SheetPanel>
  {/* Long content that will scroll if it exceeds the sheet height */}
  <div>...</div>
</SheetPanel>

SheetPopup Props

The SheetPopup component supports the following props:

side: Controls which side of the screen the sheet opens from. Options: "top", "bottom", "left", "right" (default: "right")
inset: When true, adds spacing around the sheet on desktop screens (default: false)

// Right side sheet (default)
<SheetPopup side="right">
  ...
</SheetPopup>
 
// Left side sheet
<SheetPopup side="left">
  ...
</SheetPopup>
 
// Top sheet
<SheetPopup side="top">
  ...
</SheetPopup>
 
// Bottom sheet
<SheetPopup side="bottom">
  ...
</SheetPopup>
 
// Sheet with inset spacing
<SheetPopup side="right" inset>
  ...
</SheetPopup>

Examples

Sheet with Inset

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open Sheet
      </SheetTrigger>
      <SheetPopup variant="inset">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <Form className="contents">
          <SheetPanel className="grid gap-4">
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Margaret Welsh" type="text" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@maggie.welsh" type="text" />
            </Field>
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
            <Button type="submit">Save</Button>
          </SheetFooter>
        </Form>
      </SheetPopup>
    </Sheet>
  );
}

Side Sheets

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetDescription,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function Particle() {
  return (
    <div className="flex flex-wrap gap-2">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Right
        </SheetTrigger>
        <SheetPopup showCloseButton={false}>
          <SheetHeader>
            <SheetTitle>Right</SheetTitle>
            <SheetDescription>Right side of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Left
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="left">
          <SheetHeader>
            <SheetTitle>Left</SheetTitle>
            <SheetDescription>Left side of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Top
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="top">
          <SheetHeader>
            <SheetTitle>Top</SheetTitle>
            <SheetDescription>Top of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Open Bottom
        </SheetTrigger>
        <SheetPopup showCloseButton={false} side="bottom">
          <SheetHeader>
            <SheetTitle>Bottom</SheetTitle>
            <SheetDescription>Bottom of the screen.</SheetDescription>
          </SheetHeader>
          <SheetPanel>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </SheetPanel>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Scrollable Content

A sheet with a sticky header and footer while the body scrolls independently. Useful for long forms or content lists that should never obscure the primary actions.

//biome-ignore-all lint/suspicious/noArrayIndexKey: <>
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          Scrollable Sheet
        </SheetTrigger>
        <SheetContent className="flex flex-col gap-0 space-y-0">
          <SheetHeader>
            <SheetTitle>Scrollable Content</SheetTitle>
            <SheetDescription>
              Description of the scrollable content.
            </SheetDescription>
          </SheetHeader>
          <ScrollArea className="h-[calc(100vh-230px)] flex-1 grow">
            <div className="space-y-4 px-4">
              {Array.from({ length: 20 }).map((_, i) => (
                <p className="text-muted-foreground text-sm" key={i}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris.
                </p>
              ))}
            </div>
          </ScrollArea>
          <SheetFooter>
            <Button type="submit">Save changes</Button>
            <SheetClose render={<Button variant="outline" />}>
              Cancel
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  );
}

Shopping Cart

A right-side sheet that acts as a persistent cart drawer. Inline quantity controls let users adjust or remove items, and the subtotal updates live before checkout.

"use client";

import { MinusIcon, PlusIcon, ShoppingCartIcon, TrashIcon } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type CartItem = {
  id: number;
  name: string;
  price: number;
  qty: number;
  color: string;
};

const initial: CartItem[] = [
  {
    color: "bg-slate-400",
    id: 1,
    name: "Wireless Headphones",
    price: 79,
    qty: 1,
  },
  {
    color: "bg-violet-400",
    id: 2,
    name: "Mechanical Keyboard",
    price: 129,
    qty: 1,
  },
  { color: "bg-rose-400", id: 3, name: "USB-C Hub", price: 49, qty: 2 },
];

export function Pattern() {
  const [items, setItems] = useState<CartItem[]>(initial);

  const update = (id: number, delta: number) =>
    setItems((prev) =>
      prev
        .map((item) =>
          item.id === id ? { ...item, qty: item.qty + delta } : item,
        )
        .filter((item) => item.qty > 0),
    );

  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);
  const count = items.reduce((sum, item) => sum + item.qty, 0);

  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          <ShoppingCartIcon aria-hidden="true" />
          Cart
          {count > 0 && (
            <Badge className="ml-0.5 h-4 px-1 text-[10px]">{count}</Badge>
          )}
        </SheetTrigger>
        <SheetPopup>
          <SheetHeader>
            <SheetTitle>Shopping Cart</SheetTitle>
            <SheetDescription>
              {count} {count === 1 ? "item" : "items"} in your cart.
            </SheetDescription>
          </SheetHeader>
          <SheetPanel className="space-y-3">
            {items.length === 0 ? (
              <div className="flex flex-col items-center gap-2 py-10 text-center text-muted-foreground">
                <ShoppingCartIcon className="size-8 opacity-40" />
                <p className="text-sm">Your cart is empty.</p>
              </div>
            ) : (
              items.map((item) => (
                <div
                  className="flex items-center gap-3 rounded-lg border p-3"
                  key={item.id}
                >
                  <span
                    className={`size-10 shrink-0 rounded-md ${item.color}`}
                  />
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-sm">{item.name}</p>
                    <p className="text-muted-foreground text-xs">
                      ${item.price.toFixed(2)} each
                    </p>
                  </div>
                  <div className="flex items-center gap-1">
                    <Button
                      aria-label="Decrease quantity"
                      className="size-6"
                      onClick={() => update(item.id, -1)}
                      size="icon"
                      variant="ghost"
                    >
                      {item.qty === 1 ? (
                        <TrashIcon className="size-3" />
                      ) : (
                        <MinusIcon className="size-3" />
                      )}
                    </Button>
                    <span className="w-5 text-center text-sm tabular-nums">
                      {item.qty}
                    </span>
                    <Button
                      aria-label="Increase quantity"
                      className="size-6"
                      onClick={() => update(item.id, 1)}
                      size="icon"
                      variant="ghost"
                    >
                      <PlusIcon className="size-3" />
                    </Button>
                  </div>
                </div>
              ))
            )}
          </SheetPanel>
          <SheetFooter className="flex-col gap-3 sm:flex-col">
            <div className="flex w-full items-center justify-between border-t pt-3 text-sm">
              <span className="text-muted-foreground">Subtotal</span>
              <span className="font-semibold">${subtotal.toFixed(2)}</span>
            </div>
            <div className="flex gap-2">
              <SheetClose
                render={<Button className="flex-1" variant="ghost" />}
              >
                Continue shopping
              </SheetClose>
              <Button className="flex-1" disabled={items.length === 0}>
                Checkout
              </Button>
            </div>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Notification Center

Surface recent activity in a slide-over panel without leaving the current page. Each notification can be individually acknowledged, with a bulk "mark all read" action in the header.

"use client";

import {
  AtSignIcon,
  BellIcon,
  CheckCheckIcon,
  GitPullRequestIcon,
  MessageSquareIcon,
} from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type Notification = {
  id: number;
  icon: React.ElementType;
  iconBg: string;
  title: string;
  body: string;
  time: string;
  read: boolean;
};

const initial: Notification[] = [
  {
    body: "Left a comment on your pull request #42.",
    icon: MessageSquareIcon,
    iconBg: "bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400",
    id: 1,
    read: false,
    time: "2 min ago",
    title: "Sarah commented on your PR",
  },
  {
    body: "Mentioned you in the #design-review channel.",
    icon: AtSignIcon,
    iconBg:
      "bg-violet-100 text-violet-600 dark:bg-violet-950 dark:text-violet-400",
    id: 2,
    read: false,
    time: "14 min ago",
    title: "Marcus mentioned you",
  },
  {
    body: "Your PR #38 was approved and merged into main.",
    icon: GitPullRequestIcon,
    iconBg:
      "bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400",
    id: 3,
    read: false,
    time: "1 hr ago",
    title: "PR merged successfully",
  },
  {
    body: "You've been assigned to issue #117: Dashboard redesign.",
    icon: BellIcon,
    iconBg: "bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-400",
    id: 4,
    read: true,
    time: "3 hr ago",
    title: "New issue assigned to you",
  },
];

export function Pattern() {
  const [notifications, setNotifications] = useState(initial);
  const unread = notifications.filter((n) => !n.read).length;

  const markAllRead = () =>
    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));

  const markRead = (id: number) =>
    setNotifications((prev) =>
      prev.map((n) => (n.id === id ? { ...n, read: true } : n)),
    );

  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          <BellIcon aria-hidden="true" />
          Notifications
          {unread > 0 && (
            <Badge className="ml-0.5 h-4 px-1 text-[10px]">{unread}</Badge>
          )}
        </SheetTrigger>
        <SheetPopup>
          <SheetHeader>
            <div className="flex items-center justify-between">
              <SheetTitle>Notifications</SheetTitle>
              {unread > 0 && (
                <Button
                  className="h-auto p-0 text-xs"
                  onClick={markAllRead}
                  variant="link"
                >
                  <CheckCheckIcon className="mr-1 size-3.5" />
                  Mark all read
                </Button>
              )}
            </div>
            <SheetDescription>
              {unread > 0
                ? `You have ${unread} unread notification${unread > 1 ? "s" : ""}.`
                : "You're all caught up."}
            </SheetDescription>
          </SheetHeader>
          <SheetPanel className="space-y-1 px-3">
            {notifications.map((n) => {
              const Icon = n.icon;
              return (
                <button
                  className={`flex w-full items-start gap-3 rounded-lg p-3 text-left transition-colors hover:bg-muted ${n.read ? "opacity-60" : ""}`}
                  key={n.id}
                  onClick={() => markRead(n.id)}
                >
                  <span
                    className={`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full ${n.iconBg}`}
                  >
                    <Icon aria-hidden="true" className="size-4" />
                  </span>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between gap-2">
                      <p className="truncate font-medium text-sm">{n.title}</p>
                      {!n.read && (
                        <span className="size-1.5 shrink-0 rounded-full bg-primary" />
                      )}
                    </div>
                    <p className="mt-0.5 text-muted-foreground text-xs">
                      {n.body}
                    </p>
                    <p className="mt-1 text-muted-foreground text-xs">
                      {n.time}
                    </p>
                  </div>
                </button>
              );
            })}
          </SheetPanel>
          <SheetFooter variant="bare">
            <SheetClose
              render={<Button className="w-full" variant="outline" />}
            >
              Close
            </SheetClose>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Team Invite

A sheet-based invite flow with an email input, role picker, and a live pending list. New invites appear instantly and can be revoked before the user closes the sheet.

"use client";

import { SendIcon, UserPlusIcon, XIcon } from "lucide-react";
import { useState } from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type Role = "Admin" | "Editor" | "Viewer";
type Invite = { id: number; email: string; role: Role; initials: string };

const roles: Role[] = ["Admin", "Editor", "Viewer"];

const roleBadge: Record<Role, string> = {
  Admin: "bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-400",
  Editor:
    "bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-400",
  Viewer: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
};

const pending: Invite[] = [
  { email: "sarah@example.com", id: 1, initials: "SC", role: "Editor" },
  { email: "marcus@example.com", id: 2, initials: "MK", role: "Viewer" },
];

export function Pattern() {
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<Role>("Editor");
  const [invites, setInvites] = useState<Invite[]>(pending);

  const send = () => {
    if (!email.trim()) return;
    const initials = email.slice(0, 2).toUpperCase();
    setInvites((prev) => [
      ...prev,
      { email: email.trim(), id: Date.now(), initials, role },
    ]);
    setEmail("");
  };

  const remove = (id: number) =>
    setInvites((prev) => prev.filter((i) => i.id !== id));

  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          <UserPlusIcon aria-hidden="true" />
          Invite Members
        </SheetTrigger>
        <SheetPopup>
          <SheetHeader>
            <SheetTitle>Invite Team Members</SheetTitle>
            <SheetDescription>
              Send invitations to collaborate on this project.
            </SheetDescription>
          </SheetHeader>
          <SheetPanel className="space-y-5">
            <div className="space-y-3">
              <Field>
                <FieldLabel>Email address</FieldLabel>
                <Input
                  onChange={(e) => setEmail(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && send()}
                  placeholder="colleague@company.com"
                  type="email"
                  value={email}
                />
              </Field>
              <Field>
                <FieldLabel>Role</FieldLabel>
                <div className="flex gap-2">
                  {roles.map((r) => (
                    <button
                      className={`flex-1 rounded-md border px-3 py-1.5 text-sm transition-colors ${
                        role === r
                          ? "border-primary bg-primary text-primary-foreground"
                          : "hover:bg-muted"
                      }`}
                      key={r}
                      onClick={() => setRole(r)}
                    >
                      {r}
                    </button>
                  ))}
                </div>
              </Field>
              <Button className="w-full" onClick={send}>
                <SendIcon className="size-3.5" />
                Send Invitation
              </Button>
            </div>

            {invites.length > 0 && (
              <div className="space-y-2">
                <p className="font-semibold text-[10px] text-muted-foreground uppercase tracking-wider">
                  Pending ({invites.length})
                </p>
                <div className="space-y-2">
                  {invites.map((invite) => (
                    <div
                      className="flex items-center gap-3 rounded-lg border p-2.5"
                      key={invite.id}
                    >
                      <Avatar className="size-8">
                        <AvatarFallback className="text-xs">
                          {invite.initials}
                        </AvatarFallback>
                      </Avatar>
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm">{invite.email}</p>
                      </div>
                      <span
                        className={`rounded px-1.5 py-0.5 font-medium text-[10px] ${roleBadge[invite.role]}`}
                      >
                        {invite.role}
                      </span>
                      <Button
                        aria-label="Remove invite"
                        className="size-6"
                        onClick={() => remove(invite.id)}
                        size="icon"
                        variant="ghost"
                      >
                        <XIcon className="size-3" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </SheetPanel>
          <SheetFooter>
            <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
            <Button>Done</Button>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Activity Log

A chronological audit trail displayed as a vertical timeline inside a sheet. Colored event badges distinguish deploys, merges, comments, and other action types at a glance.

import { ActivityIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type EventType = "deploy" | "merge" | "comment" | "invite" | "update";

type ActivityEvent = {
  id: number;
  user: { name: string; avatar?: string; initials: string };
  action: string;
  target: string;
  time: string;
  type: EventType;
};

const typeBadge: Record<EventType, { label: string; className: string }> = {
  comment: {
    className: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400",
    label: "Comment",
  },
  deploy: {
    className:
      "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400",
    label: "Deploy",
  },
  invite: {
    className:
      "bg-violet-100 text-violet-700 dark:bg-violet-950 dark:text-violet-400",
    label: "Invite",
  },
  merge: {
    className:
      "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400",
    label: "Merge",
  },
  update: {
    className:
      "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
    label: "Update",
  },
};

const events: ActivityEvent[] = [
  {
    action: "deployed",
    id: 1,
    target: "v2.4.1 to production",
    time: "Just now",
    type: "deploy",
    user: {
      avatar:
        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&dpr=2&q=80",
      initials: "SC",
      name: "Sarah Chen",
    },
  },
  {
    action: "merged PR #84",
    id: 2,
    target: "feat/dark-mode into main",
    time: "18 min ago",
    type: "merge",
    user: {
      avatar:
        "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=64&h=64&dpr=2&q=80",
      initials: "MK",
      name: "Marcus Kim",
    },
  },
  {
    action: "commented on",
    id: 3,
    target: "issue #112: Layout shift",
    time: "42 min ago",
    type: "comment",
    user: { initials: "AJ", name: "Aisha Johnson" },
  },
  {
    action: "invited",
    id: 4,
    target: "priya@example.com as Editor",
    time: "2 hr ago",
    type: "invite",
    user: { initials: "SC", name: "Sarah Chen" },
  },
  {
    action: "updated",
    id: 5,
    target: "project description and README",
    time: "5 hr ago",
    type: "update",
    user: {
      avatar:
        "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&dpr=2&q=80",
      initials: "LR",
      name: "Liam Rivera",
    },
  },
  {
    action: "deployed",
    id: 6,
    target: "v2.3.9 hotfix to production",
    time: "Yesterday",
    type: "deploy",
    user: { initials: "AJ", name: "Aisha Johnson" },
  },
];

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          <ActivityIcon aria-hidden="true" />
          Activity Log
        </SheetTrigger>
        <SheetPopup>
          <SheetHeader>
            <SheetTitle>Activity Log</SheetTitle>
            <SheetDescription>
              Recent actions taken across this project.
            </SheetDescription>
          </SheetHeader>
          <SheetPanel className="px-3">
            <div className="relative space-y-0">
              {events.map((event, index) => {
                const badge = typeBadge[event.type];
                return (
                  <div className="relative flex gap-3 pb-5" key={event.id}>
                    {index < events.length - 1 && (
                      <div className="absolute top-8 left-4 h-full w-px bg-border" />
                    )}
                    <Avatar className="z-10 size-8 shrink-0 ring-2 ring-background">
                      {event.user.avatar && (
                        <AvatarImage
                          alt={event.user.name}
                          src={event.user.avatar}
                        />
                      )}
                      <AvatarFallback className="text-xs">
                        {event.user.initials}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1 pt-0.5">
                      <div className="flex flex-wrap items-center gap-1.5">
                        <span className="font-medium text-sm">
                          {event.user.name}
                        </span>
                        <span className="text-muted-foreground text-sm">
                          {event.action}
                        </span>
                        <span
                          className={`rounded px-1.5 py-0.5 font-medium text-[10px] ${badge.className}`}
                        >
                          {badge.label}
                        </span>
                      </div>
                      <p className="mt-0.5 truncate text-muted-foreground text-xs">
                        {event.target}
                      </p>
                      <p className="mt-1 text-muted-foreground text-xs">
                        {event.time}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </SheetPanel>
          <SheetFooter variant="bare">
            <SheetClose
              render={<Button className="w-full" variant="outline" />}
            >
              Close
            </SheetClose>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

A left-side sheet used as a mobile navigation drawer. Grouped nav links with a badge counter, a branded header, and a sticky user profile row at the bottom.

import {
  BookOpenIcon,
  BoxIcon,
  HelpCircleIcon,
  HomeIcon,
  LayoutDashboardIcon,
  MenuIcon,
  SettingsIcon,
  UsersIcon,
} from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetPopup,
  SheetTrigger,
} from "@/components/ui/sheet";

const navGroups = [
  {
    items: [
      { icon: HomeIcon, label: "Home" },
      { badge: 3, icon: LayoutDashboardIcon, label: "Dashboard" },
      { icon: BoxIcon, label: "Projects" },
      { icon: UsersIcon, label: "Team" },
    ],
    label: "Main",
  },
  {
    items: [
      { icon: SettingsIcon, label: "Settings" },
      { icon: BookOpenIcon, label: "Documentation" },
      { icon: HelpCircleIcon, label: "Help & Support" },
    ],
    label: "General",
  },
] as const;

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button size="icon" variant="outline" />}>
          <MenuIcon aria-hidden="true" />
        </SheetTrigger>
        <SheetPopup className="max-w-60" showCloseButton={false} side="left">
          <div className="flex h-full flex-col">
            <div className="flex items-center gap-2.5 border-b px-5 py-4">
              <span className="flex size-7 items-center justify-center rounded-lg bg-primary font-bold text-primary-foreground text-xs">
                C
              </span>
              <span className="font-semibold">Cnippet UI</span>
            </div>

            <nav className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
              {navGroups.map((group) => (
                <div key={group.label}>
                  <p className="mb-1.5 px-2 font-semibold text-[10px] text-muted-foreground uppercase tracking-wider">
                    {group.label}
                  </p>
                  <div className="space-y-0.5">
                    {group.items.map((item) => {
                      const Icon = item.icon;
                      return (
                        <SheetClose
                          key={item.label}
                          render={
                            <button className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
                          }
                        >
                          <Icon
                            aria-hidden="true"
                            className="size-4 shrink-0 text-muted-foreground"
                          />
                          <span className="flex-1 text-left">{item.label}</span>
                          {"badge" in item && item.badge && (
                            <Badge className="h-4 px-1 text-[10px]">
                              {item.badge}
                            </Badge>
                          )}
                        </SheetClose>
                      );
                    })}
                  </div>
                </div>
              ))}
            </nav>

            <div className="border-t px-3 py-3">
              <div className="flex items-center gap-3 rounded-lg px-2 py-2">
                <Avatar className="size-8">
                  <AvatarImage
                    alt="Margaret Welsh"
                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&dpr=2&q=80"
                  />
                  <AvatarFallback>MW</AvatarFallback>
                </Avatar>
                <div className="min-w-0 flex-1">
                  <p className="truncate font-medium text-sm">Margaret Welsh</p>
                  <p className="truncate text-muted-foreground text-xs">
                    margaret@example.com
                  </p>
                </div>
                <Button className="size-7 shrink-0" size="icon" variant="ghost">
                  <SettingsIcon aria-hidden="true" className="size-3.5" />
                </Button>
              </div>
            </div>
          </div>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Issue Detail

A wide sheet that surfaces the full context of a task — status, priority, due date, description, and threaded comments — without navigating away from the current view.

"use client";

import {
  CalendarIcon,
  CircleDotIcon,
  FlagIcon,
  MessageSquareIcon,
  PaperclipIcon,
  SendIcon,
  TagIcon,
} from "lucide-react";
import { useState } from "react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";

const comments = [
  {
    avatar:
      "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=64&h=64&dpr=2&q=80",
    body: "I think we should also handle the edge case where the session token expires mid-request. Should we add a refresh flow?",
    id: 1,
    initials: "MK",
    name: "Marcus Kim",
    time: "2 hr ago",
  },
  {
    avatar:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&dpr=2&q=80",
    body: "Good point. I'll add that to the acceptance criteria. The refresh logic can live in the auth middleware.",
    id: 2,
    initials: "SC",
    name: "Sarah Chen",
    time: "1 hr ago",
  },
];

const meta = [
  {
    icon: CircleDotIcon,
    label: "Status",
    value: (
      <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400">
        In Progress
      </Badge>
    ),
  },
  {
    icon: FlagIcon,
    label: "Priority",
    value: (
      <Badge className="bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-400">
        High
      </Badge>
    ),
  },
  {
    icon: CalendarIcon,
    label: "Due date",
    value: <span className="text-sm">Jun 15, 2025</span>,
  },
  {
    icon: TagIcon,
    label: "Labels",
    value: (
      <div className="flex gap-1">
        <Badge variant="outline">auth</Badge>
        <Badge variant="outline">backend</Badge>
      </div>
    ),
  },
];

export function Pattern() {
  const [comment, setComment] = useState("");

  return (
    <div className="flex items-center justify-center">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>
          <CircleDotIcon aria-hidden="true" />
          View Issue
        </SheetTrigger>
        <SheetPopup className="sm:max-w-lg">
          <SheetHeader>
            <div className="flex items-start gap-2 pr-8">
              <SheetTitle className="leading-snug">
                Implement session refresh for expired auth tokens
              </SheetTitle>
            </div>
            <SheetDescription>Issue #117 · opened 3 days ago</SheetDescription>
          </SheetHeader>
          <SheetPanel className="space-y-5">
            <div className="divide-y rounded-lg border">
              {meta.map(({ icon: Icon, label, value }) => (
                <div className="flex items-center gap-3 px-3 py-2" key={label}>
                  <Icon
                    aria-hidden="true"
                    className="size-3.5 shrink-0 text-muted-foreground"
                  />
                  <span className="w-20 shrink-0 text-muted-foreground text-xs">
                    {label}
                  </span>
                  {value}
                </div>
              ))}
            </div>

            <div>
              <p className="mb-2 font-medium text-sm">Description</p>
              <p className="text-muted-foreground text-sm leading-relaxed">
                When a user's session token expires mid-request, the app should
                silently refresh the token using the refresh token stored in an
                HttpOnly cookie and retry the original request without any user
                interruption.
              </p>
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2 font-medium text-sm">
                <MessageSquareIcon className="size-3.5" />
                Comments ({comments.length})
              </div>
              {comments.map((c) => (
                <div className="flex gap-3" key={c.id}>
                  <Avatar className="size-7 shrink-0">
                    <AvatarImage alt={c.name} src={c.avatar} />
                    <AvatarFallback className="text-xs">
                      {c.initials}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 rounded-lg border p-2.5">
                    <div className="flex items-center justify-between gap-2">
                      <span className="font-medium text-xs">{c.name}</span>
                      <span className="text-muted-foreground text-xs">
                        {c.time}
                      </span>
                    </div>
                    <p className="mt-1 text-muted-foreground text-xs leading-relaxed">
                      {c.body}
                    </p>
                  </div>
                </div>
              ))}
              <div className="flex gap-3">
                <Avatar className="size-7 shrink-0">
                  <AvatarImage
                    alt="You"
                    src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&dpr=2&q=80"
                  />
                  <AvatarFallback className="text-xs">LR</AvatarFallback>
                </Avatar>
                <Textarea
                  className="min-h-[72px] flex-1 resize-none text-sm"
                  onChange={(e) => setComment(e.target.value)}
                  placeholder="Leave a comment…"
                  value={comment}
                />
              </div>
            </div>
          </SheetPanel>
          <SheetFooter>
            <div className="flex w-full items-center justify-between gap-2">
              <Button size="icon" variant="ghost">
                <PaperclipIcon className="size-4" />
              </Button>
              <div className="flex gap-2">
                <SheetClose render={<Button variant="ghost" />}>
                  Close
                </SheetClose>
                <Button disabled={!comment.trim()}>
                  <SendIcon className="size-3.5" />
                  Comment
                </Button>
              </div>
            </div>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}

Export Data Panel

Choose between CSV, JSON, and TXT formats, set a filename, and review what the export includes — all before hitting Download.

"use client";

import {
  DownloadIcon,
  FileJsonIcon,
  FileSpreadsheetIcon,
  FileTextIcon,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const formats = [
  { ext: "csv", Icon: FileSpreadsheetIcon, label: "CSV" },
  { ext: "json", Icon: FileJsonIcon, label: "JSON" },
  { ext: "txt", Icon: FileTextIcon, label: "TXT" },
];

export default function Particle() {
  const [format, setFormat] = useState("csv");
  const [filename, setFilename] = useState("export");

  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <DownloadIcon aria-hidden="true" />
        Export Data
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Export Data</SheetTitle>
          <SheetDescription>
            Choose a format and filename before downloading.
          </SheetDescription>
        </SheetHeader>
        <SheetPanel className="space-y-5">
          <div className="space-y-2">
            <p className="font-medium text-sm">File format</p>
            <div className="grid grid-cols-3 gap-2">
              {formats.map(({ ext, Icon, label }) => (
                <button
                  className={`flex flex-col items-center gap-2 rounded-lg border p-3 text-sm transition-colors ${
                    format === ext
                      ? "border-primary bg-primary/5 text-primary"
                      : "hover:bg-muted"
                  }`}
                  key={ext}
                  onClick={() => setFormat(ext)}
                  type="button"
                >
                  <Icon aria-hidden="true" className="size-5" />
                  {label}
                </button>
              ))}
            </div>
          </div>
          <Field>
            <FieldLabel>Filename</FieldLabel>
            <div className="flex items-center">
              <Input
                className="rounded-r-none"
                onChange={(e) => setFilename(e.target.value)}
                type="text"
                value={filename}
              />
              <span className="flex h-9 items-center rounded-r-lg border border-l-0 bg-muted px-3 text-muted-foreground text-sm">
                .{format}
              </span>
            </div>
          </Field>
          <div className="space-y-1.5 rounded-lg bg-muted/50 p-3 text-muted-foreground text-xs">
            <p className="font-medium text-foreground">Export includes:</p>
            <p>• All records from the current view</p>
            <p>• Applied filters and column order</p>
            <p>• Column headers in the first row</p>
          </div>
        </SheetPanel>
        <SheetFooter>
          <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
          <Button>
            <DownloadIcon aria-hidden="true" />
            Download
          </Button>
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}

User Profile Viewer

A slide-over profile card showing an avatar, bio, repository stats, and social links — with a Follow action in the footer.

import { BoxIcon, CircuitBoardIcon, GlobeIcon, LinkIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  Sheet,
  SheetClose,
  SheetPanel,
  SheetPopup,
  SheetTrigger,
} from "@/components/ui/sheet";

const stats = [
  { label: "Repos", value: "42" },
  { label: "Followers", value: "1.2k" },
  { label: "Stars", value: "8.4k" },
];

const links = [
  { Icon: GlobeIcon, label: "example.com" },
  { Icon: BoxIcon, label: "@margaret_dev" },
  { Icon: CircuitBoardIcon, label: "margaret-welsh" },
];

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <LinkIcon aria-hidden="true" />
        View Profile
      </SheetTrigger>
      <SheetPopup>
        <SheetPanel className="space-y-5">
          <div className="flex items-start gap-4 pt-2">
            <Avatar className="size-16">
              <AvatarImage
                alt="Margaret Welsh"
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&dpr=2&q=80"
              />
              <AvatarFallback>MW</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <p className="font-semibold">Margaret Welsh</p>
              <p className="text-muted-foreground text-sm">@margaret-welsh</p>
              <div className="mt-2 flex flex-wrap gap-1.5">
                <Badge variant="secondary">Design Engineer</Badge>
                <Badge variant="outline">Open Source</Badge>
              </div>
            </div>
          </div>

          <p className="text-muted-foreground text-sm leading-relaxed">
            Building design systems and component libraries. Passionate about
            accessibility and developer experience. Previously at Vercel.
          </p>

          <Separator />

          <div className="flex items-center justify-around text-center">
            {stats.map(({ label, value }) => (
              <div key={label}>
                <p className="font-semibold">{value}</p>
                <p className="text-muted-foreground text-xs">{label}</p>
              </div>
            ))}
          </div>

          <Separator />

          <div className="space-y-2">
            {links.map(({ Icon, label }) => (
              <div
                className="flex items-center gap-2 text-muted-foreground text-sm"
                key={label}
              >
                <Icon aria-hidden="true" className="size-3.5 shrink-0" />
                <span>{label}</span>
              </div>
            ))}
          </div>
        </SheetPanel>
        <div className="border-t p-4">
          <div className="flex gap-2">
            <Button className="flex-1">Follow</Button>
            <SheetClose
              render={<Button className="flex-1" variant="outline" />}
            >
              Close
            </SheetClose>
          </div>
        </div>
      </SheetPopup>
    </Sheet>
  );
}

Support Contact Form

Category chip selector, subject input, and a message textarea. On submit the panel switches to a confirmation state without closing.

"use client";

import { HelpCircleIcon, SendIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";

const categories = ["Bug report", "Feature request", "Question", "Other"];

export default function Particle() {
  const [category, setCategory] = useState("Bug report");
  const [submitted, setSubmitted] = useState(false);

  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <HelpCircleIcon aria-hidden="true" />
        Get Support
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Contact Support</SheetTitle>
          <SheetDescription>
            We typically respond within 24 hours.
          </SheetDescription>
        </SheetHeader>
        {submitted ? (
          <SheetPanel className="flex flex-col items-center justify-center gap-3 py-16 text-center">
            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
              <SendIcon aria-hidden="true" className="size-5" />
            </div>
            <p className="font-medium">Message sent!</p>
            <p className="text-muted-foreground text-sm">
              Our team will get back to you shortly.
            </p>
          </SheetPanel>
        ) : (
          <SheetPanel className="space-y-4">
            <div className="space-y-2">
              <p className="font-medium text-sm">Category</p>
              <div className="flex flex-wrap gap-2">
                {categories.map((cat) => (
                  <button
                    className={`rounded-full border px-3 py-1 text-xs transition-colors ${
                      category === cat
                        ? "border-primary bg-primary text-primary-foreground"
                        : "hover:bg-muted"
                    }`}
                    key={cat}
                    onClick={() => setCategory(cat)}
                    type="button"
                  >
                    {cat}
                  </button>
                ))}
              </div>
            </div>
            <Field>
              <FieldLabel>Subject</FieldLabel>
              <Input
                placeholder="Brief description of your issue"
                type="text"
              />
            </Field>
            <Field>
              <FieldLabel>Message</FieldLabel>
              <Textarea
                className="min-h-28 resize-none"
                placeholder="Describe the problem in detail…"
              />
            </Field>
          </SheetPanel>
        )}
        <SheetFooter>
          <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
          {!submitted && (
            <Button onClick={() => setSubmitted(true)}>
              <SendIcon aria-hidden="true" />
              Send Message
            </Button>
          )}
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}

Keyboard Shortcuts Reference

A read-only cheat sheet grouping shortcuts by General, Editor, and View — each key rendered as a Badge in monospace style.

import { KeyboardIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

const shortcuts = [
  {
    items: [
      { keys: ["⌘", "K"], label: "Open command palette" },
      { keys: ["⌘", "P"], label: "Quick file open" },
      { keys: ["⌘", "Shift", "F"], label: "Search in project" },
      { keys: ["⌘", "/"], label: "Toggle comment" },
    ],
    section: "General",
  },
  {
    items: [
      { keys: ["⌘", "S"], label: "Save file" },
      { keys: ["⌘", "Z"], label: "Undo" },
      { keys: ["⌘", "Shift", "Z"], label: "Redo" },
      { keys: ["⌘", "D"], label: "Duplicate line" },
    ],
    section: "Editor",
  },
  {
    items: [
      { keys: ["⌘", "B"], label: "Toggle sidebar" },
      { keys: ["⌘", "J"], label: "Toggle panel" },
      { keys: ["⌘", "`"], label: "Toggle terminal" },
    ],
    section: "View",
  },
];

export default function Particle() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <KeyboardIcon aria-hidden="true" />
        Shortcuts
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>Keyboard Shortcuts</SheetTitle>
          <SheetDescription>
            A quick reference for available keyboard shortcuts.
          </SheetDescription>
        </SheetHeader>
        <SheetPanel className="space-y-4">
          {shortcuts.map(({ items, section }, i) => (
            <div key={section}>
              {i > 0 && <Separator className="mb-4" />}
              <p className="mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">
                {section}
              </p>
              <div className="space-y-1">
                {items.map(({ keys, label }) => (
                  <div
                    className="flex items-center justify-between py-1"
                    key={label}
                  >
                    <span className="text-sm">{label}</span>
                    <div className="flex items-center gap-1">
                      {keys.map((k) => (
                        <Badge
                          className="h-5 rounded px-1.5 font-mono text-[10px]"
                          key={k}
                          variant="outline"
                        >
                          {k}
                        </Badge>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </SheetPanel>
        <SheetFooter>
          <SheetClose render={<Button className="w-full" variant="outline" />}>
            Close
          </SheetClose>
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}

API Key Manager

Lists active API keys with their prefix, creation date, and last-used time. Each key has a rotate (with spinner) and revoke action.

"use client";

import { KeyRoundIcon, PlusIcon, RotateCcwIcon, TrashIcon } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type ApiKey = {
  id: number;
  label: string;
  created: string;
  lastUsed: string;
  prefix: string;
};

const initial: ApiKey[] = [
  {
    created: "Jan 3, 2025",
    id: 1,
    label: "Production",
    lastUsed: "2 minutes ago",
    prefix: "sk_live_••••••••••••••••",
  },
  {
    created: "Feb 14, 2025",
    id: 2,
    label: "Development",
    lastUsed: "Yesterday",
    prefix: "sk_test_••••••••••••••••",
  },
];

export default function Particle() {
  const [keys, setKeys] = useState<ApiKey[]>(initial);
  const [rotating, setRotating] = useState<number | null>(null);

  const revoke = (id: number) =>
    setKeys((prev) => prev.filter((k) => k.id !== id));

  const rotate = async (id: number) => {
    setRotating(id);
    await new Promise((r) => setTimeout(r, 800));
    setRotating(null);
  };

  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        <KeyRoundIcon aria-hidden="true" />
        API Keys
      </SheetTrigger>
      <SheetPopup>
        <SheetHeader>
          <SheetTitle>API Keys</SheetTitle>
          <SheetDescription>
            Manage your secret keys. Never share them publicly.
          </SheetDescription>
        </SheetHeader>
        <SheetPanel className="space-y-3">
          {keys.map((key) => (
            <div className="rounded-lg border p-3" key={key.id}>
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <p className="font-medium text-sm">{key.label}</p>
                  <Badge className="text-[10px]" variant="outline">
                    {key.id === 1 ? "Live" : "Test"}
                  </Badge>
                </div>
                <div className="flex items-center gap-1">
                  <Button
                    aria-label="Rotate key"
                    className="size-7"
                    disabled={rotating === key.id}
                    onClick={() => rotate(key.id)}
                    size="icon"
                    variant="ghost"
                  >
                    <RotateCcwIcon
                      aria-hidden="true"
                      className={`size-3.5 ${rotating === key.id ? "animate-spin" : ""}`}
                    />
                  </Button>
                  <Button
                    aria-label="Revoke key"
                    className="size-7 text-destructive hover:text-destructive"
                    onClick={() => revoke(key.id)}
                    size="icon"
                    variant="ghost"
                  >
                    <TrashIcon aria-hidden="true" className="size-3.5" />
                  </Button>
                </div>
              </div>
              <p className="mt-1.5 font-mono text-muted-foreground text-xs">
                {key.prefix}
              </p>
              <div className="mt-2 flex items-center gap-3 text-muted-foreground text-xs">
                <span>Created {key.created}</span>
                <span>·</span>
                <span>Last used {key.lastUsed}</span>
              </div>
            </div>
          ))}
        </SheetPanel>
        <SheetFooter>
          <SheetClose render={<Button variant="ghost" />}>Close</SheetClose>
          <Button>
            <PlusIcon aria-hidden="true" />
            Create New Key
          </Button>
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}

On This Page

Installation Usage Examples Sheet with Inset Side Sheets Scrollable Content Shopping Cart Notification Center Team Invite Activity Log Navigation Menu Issue Detail Export Data Panel User Profile Viewer Support Contact Form Keyboard Shortcuts Reference API Key Manager