Browse components

Modal

Centered modal dialog built on Base UI Dialog.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/modal.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/modal.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/modal.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/modal.

Import

import {  Modal,  ModalContent,  ModalDescription,  ModalFooter,  ModalHeader,  ModalTitle,  ModalTrigger} from "@/components/ui/modal"

example.tsx

import { Button } from "@/components/ui/button"import {  Modal,  ModalContent,  ModalDescription,  ModalFooter,  ModalHeader,  ModalTitle,  ModalTrigger,} from "@/components/ui/modal"export function Example() {  return (    <Modal>      <ModalTrigger render={<Button />}>Open modal</ModalTrigger>      <ModalContent>        <ModalHeader>          <ModalTitle>Modal title</ModalTitle>          <ModalDescription>Built on Base UI Dialog.</ModalDescription>        </ModalHeader>        <ModalFooter>          <Button>Continue</Button>        </ModalFooter>      </ModalContent>    </Modal>  )}

API Reference

Modal

Dialog root. Controlled via `open` / `onOpenChange`.

Prop	Type	Default
open	boolean	—
onOpenChange	(open: boolean) => void	—

ModalContent

Prop	Type	Default
showCloseButton	boolean	true

Notes

`ModalTitle` is required for accessibility. Use `className="sr-only"` if you hide it visually.
Compose custom triggers with `render`, not `asChild`.