A slide-out side sheet containing a support contact form with category chips, subject and message fields, and a submitted confirmation state.
"use client";
import { HelpCircleIcon, SendIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/v-sheet-13-utils/button";
import { Field, FieldLabel } from "@/components/ui/v-sheet-13-utils/field";
import { Input } from "@/components/ui/v-sheet-13-utils/input";
import {
Sheet,
SheetClose,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from "@/components/ui/v-sheet-13-utils/sheet";
import { Textarea } from "@/components/ui/v-sheet-13-utils/textarea";
const categories = ["Bug report", "Feature request", "Question", "Other"];
function SupportSheet() {
const [category, setCategory] = useState("Bug report");
const [submitted, setSubmitted] = useState(false);
return (
<Sheet defaultOpen>
<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>
);
}
export default function Default() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center p-6">
<SupportSheet />
</div>
);
}
Part of Cnippet — browse the full library on 21st.dev.