Components
Loading preview...
Here is Modal component
npx shadcn@latest add https://21st.dev/r/educlopez/modal"use client"
import React, { useState } from "react"
import BasicModal from "@/components/ui/modal"
const ModalDemo = () => {
const [isOpen, setIsOpen] = useState(false)
return (
<div className="flex flex-col gap-4 p-8">
{/* Trigger button */}
<button
onClick={() => setIsOpen(true)}
className="bg-background text-foreground cursor-pointer rounded-md border px-3 py-2 shadow-xs transition-colors hover:bg-muted"
>
Open Modal
</button>
<BasicModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Beautiful Modal"
size="md"
className="bg-background text-foreground shadow-lg ring-1 ring-border"
>
<div className="flex flex-col gap-4">
<p>
This is a beautiful animated modal with smooth entrance and exit
animations. Click outside or press Escape to close.
</p>
{/* Features list */}
<div className="flex flex-col gap-2">
<h4 className="font-medium">Features:</h4>
<ul className="list-inside list-disc space-y-1 text-muted-foreground">
<li>Smooth animations</li>
<li>Backdrop blur effect</li>
<li>Responsive design</li>
<li>Keyboard navigation (ESC to close)</li>
</ul>
</div>
{/* Actions */}
<div className="mt-4 flex justify-end gap-2">
<button
onClick={() => setIsOpen(false)}
className="rounded-lg border px-4 py-2 text-foreground transition-colors hover:bg-secondary/80"
>
Cancel
</button>
<button
onClick={() => setIsOpen(false)}
className="bg-primary text-primary-foreground hover:bg-primary/80 rounded-lg px-4 py-2 transition-colors"
>
Confirm
</button>
</div>
</div>
</BasicModal>
</div>
)
}
export default ModalDemo