dialog
gr8monk3ys/dialogFreeComponent
dialog (identity-styled).
Install it
npx shadcn@latest add https://ui.lscaturchio.xyz/r/dialog.jsonSource
1"use client"23import * as React from "react"4import { XIcon } from "lucide-react"5import { Dialog as DialogPrimitive } from "radix-ui"67import { cn } from "@/lib/utils"8import { Button } from "@/components/ui/button"910function Dialog({11 ...props12}: React.ComponentProps<typeof DialogPrimitive.Root>) {13 return <DialogPrimitive.Root data-slot="dialog" {...props} />14}1516function DialogTrigger({17 ...props18}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {19 return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />20}2122function DialogPortal({23 ...props24}: React.ComponentProps<typeof DialogPrimitive.Portal>) {25 return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />26}2728function DialogClose({29 ...props30}: React.ComponentProps<typeof DialogPrimitive.Close>) {31 return <DialogPrimitive.Close data-slot="dialog-close" {...props} />32}3334function DialogOverlay({35 className,36 ...props37}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {38 return (39 <DialogPrimitive.Overlay40 data-slot="dialog-overlay"41 className={cn(42 "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",43 className44 )}45 {...props}46 />47 )48}4950function DialogContent({51 className,52 children,53 showCloseButton = true,54 ...props55}: React.ComponentProps<typeof DialogPrimitive.Content> & {56 showCloseButton?: boolean57}) {58 return (59 <DialogPortal data-slot="dialog-portal">60 <DialogOverlay />61 <DialogPrimitive.Content62 data-slot="dialog-content"63 className={cn(64 "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border glass-heavy p-6 duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",65 className66 )}67 {...props}68 >69 {children}70 {showCloseButton && (71 <DialogPrimitive.Close72 data-slot="dialog-close"73// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from gr8monk3ys
All 69 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | gr8monk3ys | Components | Free | 2 deps | |
| ActiveNavLinkactive-nav-link | gr8monk3ys | Components | Free | no deps · 2 files | |
| alertalert | gr8monk3ys | Components | Free | 1 dep | |
| alert-dialogalert-dialog | gr8monk3ys | Components | Free | 1 dep | |
| aspect-ratioaspect-ratio | gr8monk3ys | Components | Free | 1 dep | |
| attachmentattachment | gr8monk3ys | Components | Free | 2 deps | |
| Avataravatar | gr8monk3ys | Components | Free | 1 dep | |
| Badgebadge | gr8monk3ys | Components | Free | 1 dep |
