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 {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export function Login() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Login</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Login</SheetTitle>
<SheetDescription>
Please login again to continue using the application.
</SheetDescription>
</SheetHeader>
<form className="grid gap-4 py-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
required
id="email"
type="email"
autoComplete="username"
placeholder="team@mynaui.com"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input
required
id="password"
type="password"
placeholder="••••••••••"
autoComplete="current-password"
/>
</div>
</form>
<SheetFooter>
<SheetClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</SheetClose>
<Button type="submit">Login</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
}