Installation
npx lovdacn@latest add alert-dialog(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add alert-dialog)
This copies the component source into your project (typically components/ui/alert-dialog.tsx) and installs any required dependencies.
Registry dependencies: utils, button, text
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { Text } from "@/components/ui/text"
export function Example() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">
<Text>Show Dialog</Text>
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
<Text>Are you sure?</Text>
</AlertDialogTitle>
<AlertDialogDescription>
<Text>This action cannot be undone.</Text>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>
<Text>Cancel</Text>
</AlertDialogCancel>
<AlertDialogAction>
<Text>Continue</Text>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}Styles
lvcn components are available across all style packs:
| Style | Notes |
|---|---|
default | Classic rounded system |
new-york | Compact, refined |
nova | Sharp corners (default in many setups) |
luma / lyra / maia / mira | Radius & font variants |
rhea / sera / vega | Pill, zero-radius, balanced |
Style is set at project init via lvcn.json (style + styleEngine).
Platform
These components target Expo / React Native with NativeWind or Uniwind. They use Platform.select where web and native need different behavior.