Components
Loading preview...
Extends the Dialog component to display content that complements the main content of the screen.
npx shadcn@latest add https://21st.dev/r/shadcn/sheetimport { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export function Basic() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Add Task</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Add Task</SheetTitle>
<SheetDescription>
New tasks are added to the default category.
</SheetDescription>
</SheetHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Task Name</Label>
<Input id="name" placeholder="Enter task name here" />
</div>
<div className="grid gap-2">
<Label htmlFor="assignee">Assignee</Label>
<Select>
<SelectTrigger>
<SelectValue id="assignee" placeholder="Select someone" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Adam</SelectItem>
<SelectItem value="2">Ruth</SelectItem>
<SelectItem value="3">Taylor</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<SheetFooter>
<SheetClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</SheetClose>
<Button type="submit">Add</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
}