Get Started
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Container
- Context Menu
- Data Table
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Flex
- Form
- Grid
- Hero Button
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Responsive
- Scroll Area
- Segmented Control
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spacer
- Spinner
- Squircle
- Switch
- Table
- Tabs
- Textarea
- Theme Toggle
- Toggle Group
- Toggle
- Tooltip
- Typography
- Unicorn Wrapper
Animations
- Background Image Parallax
- Card Swipe Carousel
- Cards Parallax
- Parallax Scroll
- Perspective Carousel
- Perspective Section Transition
- Scroll Expand
- Scroll Fade
- Scroll Scale
- Slide Down
- Slide Up
- Smooth Parallax Scroll
- Smooth Scroll
- Sticky Footer
- Text Along Path
- Text Gradient Opacity
- Text Parallax
- Transforms 3d
- Zoom Parallax
A modal dialog that interrupts the user with important content and expects a response.
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
Installation
pnpm dlx pitsi@latest add alert-dialog
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"<AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>