Components
Starting preview...
Displays rich content in a portal, triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/popoverimport { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Plus } from "@mynaui/icons-react";
export function AddButton() {
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="icon">
<Plus className="size-5" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 p-5">
<div className="space-y-4">
<div>
<h3 className="font-medium">Add Book</h3>
<p className="text-muted-foreground">
Fill out the form to add a new book.
</p>
</div>
<form className="space-y-4">
<div className="space-y-1">
<Label htmlFor="title">Title</Label>
<Input id="title" placeholder="Enter book title" />
</div>
<div className="space-y-1">
<Label htmlFor="author">Author</Label>
<Input id="author" placeholder="Enter author name" />
</div>
<Button type="submit" size="sm">
Add Book
</Button>
</form>
</div>
</PopoverContent>
</Popover>
);
}