Components
Loading preview...
A drawer component for React.
npx shadcn@latest add https://21st.dev/r/shadcn/drawerimport { Button } from "@/components/ui/button";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
function Basic() {
return (
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Add Task</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
<DrawerHeader>
<DrawerTitle>Add Task</DrawerTitle>
<DrawerDescription>
New tasks are added to the default category.
</DrawerDescription>
</DrawerHeader>
<div className="grid gap-4 p-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>
<DrawerFooter>
<Button type="submit">Add</Button>
<DrawerClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DrawerClose>
</DrawerFooter>
</div>
</DrawerContent>
</Drawer>
);
}
export { Basic }