Modal
ManpowerHub dialog modal.
import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { Field, FieldLabel,} from "@/registry/new-york/items/manpowerhub-field/components/field";import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle,} from "@/registry/new-york/items/manpowerhub-modal/components/modal";export function ManpowerhubModalBasic() { return ( <Modal defaultOpen> <ModalContent> <ModalHeader> <div> <ModalTitle>Deploy Workers</ModalTitle> <ModalDescription> Assign workers to Site Alpha — Dubai </ModalDescription> </div> </ModalHeader> <ModalBody> <Field> <FieldLabel>Worker Count</FieldLabel> <Input type="number" defaultValue={42} /> </Field> </ModalBody> <ModalFooter> <Button variant="ghost" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ModalFooter> </ModalContent> </Modal> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/modal.tsx
import * as React from "react";import { X } from "lucide-react";
import { cn } from "@/lib/utils";import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,} from "@/components/ui/dialog";import { Button } from "@/components/ui/button";
function Modal({ ...props }: React.ComponentProps<typeof Dialog>) { return <Dialog {...props} />;}
function ModalContent({ className, children, showClose = true, ...props}: React.ComponentProps<typeof DialogContent> & { showClose?: boolean;}) { return ( <DialogContent data-slot="modal-content" className={cn( "max-w-[440px] gap-0 overflow-hidden rounded-[var(--r-xl)] border-[var(--color-border-strong)] p-0 shadow-[var(--shadow-xl)]", className, )} {...props} > {children} {showClose ? ( <DialogClose asChild> <Button variant="ghost" size="icon-xs" className="absolute top-4 right-4 size-[26px] rounded-[var(--r-xs)] border border-[var(--color-border-strong)] bg-[var(--surface-3)] text-[var(--text-3)] hover:bg-[var(--surface-4)] hover:text-foreground" > <X className="size-3.25" /> <span className="sr-only">Close</span> </Button> </DialogClose> ) : null} </DialogContent> );}
function ModalHeader({ className, ...props}: React.ComponentProps<typeof DialogHeader>) { return ( <DialogHeader data-slot="modal-header" className={cn( "flex-row items-start justify-between gap-3 border-b border-border px-4.5 pt-4.5 pb-3.5 text-left", className, )} {...props} /> );}
function ModalTitle({ className, ...props}: React.ComponentProps<typeof DialogTitle>) { return ( <DialogTitle data-slot="modal-title" className={cn("text-sm font-bold", className)} {...props} /> );}
function ModalDescription({ className, ...props}: React.ComponentProps<typeof DialogDescription>) { return ( <DialogDescription data-slot="modal-description" className={cn("mt-0.5 text-xs text-[var(--text-3)]", className)} {...props} /> );}
function ModalBody({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="modal-body" className={cn("flex flex-col gap-3.25 px-4.5 py-4", className)} {...props} /> );}
function ModalFooter({ className, ...props}: React.ComponentProps<typeof DialogFooter>) { return ( <DialogFooter data-slot="modal-footer" className={cn( "flex-row justify-end gap-2 border-t border-border px-4.5 py-3.25", className, )} {...props} /> );}
export { Modal, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this modal:
npx shadcn@latest add @woxcn/manpowerhub-modal