"use client"
import { Button } from "@/components/ui/preskok-ui/button"
import { Modal } from "@/components/ui/preskok-ui/modal"
import { TextField } from "@/components/ui/preskok-ui/text-field"
export function ModalPreskokDemo() {
return (
<Modal>
<Button intent="outline">Rename</Button>
<Modal.Content isBlurred>
{({ close }) => (
<>
<Modal.Header>
<Modal.Title>Rename project</Modal.Title>
<Modal.Description>
Change how this project will appear across the dashboard.
</Modal.Description>
</Modal.Header>
<Modal.Body>
<TextField
autoFocus
aria-label="Name"
placeholder="Enter a name"
/>
</Modal.Body>
<Modal.Footer>
<Modal.Close>Cancel</Modal.Close>
<Button onPress={close} intent="primary">
Save changes
</Button>
</Modal.Footer>
</>
)}
</Modal.Content>
</Modal>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add modal
Usage
import { Modal } from "@/registry/preskok/ui/preskok-ui/modal"
export function ModalDemo() {
return (
<Modal isOpen onOpenChange={() => {}}>
<div>Content</div>
</Modal>
)
}