diff --git a/src/components/ui/Dialog.stories.tsx b/src/components/ui/Dialog.stories.tsx
new file mode 100644
index 0000000..62fdede
--- /dev/null
+++ b/src/components/ui/Dialog.stories.tsx
@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  Button,
+  Input,
+  Label,
+} from "./index";
+
+function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Edit Profile
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-end">
+              Name
+            </Label>
+            <Input
+              id="name"
+              defaultValue="Pedro Duarte"
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-end">
+              Username
+            </Label>
+            <Input
+              id="username"
+              defaultValue="@peduarte"
+              className="col-span-3"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Cancel
+          </DialogClose>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DialogCustomCloseDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Custom Close Button
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Custom Close</DialogTitle>
+          <DialogDescription>
+            This dialog uses a custom close button in the footer instead of the
+            default X button.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm text-muted-foreground">
+            You can customize the close behavior by using the DialogClose
+            component anywhere inside the dialog.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Close
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DialogNoCloseButtonDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        No Close Button
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>No Close Button</DialogTitle>
+          <DialogDescription>
+            This dialog has no close button. Click outside or press Escape to
+            close it.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm text-muted-foreground">
+            Use <code className="text-foreground">showCloseButton=&#123;false&#125;</code> to
+            hide the default close button.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DialogScrollableDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Scrollable Content
+      </DialogTrigger>
+      <DialogContent className="max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Terms of Service</DialogTitle>
+          <DialogDescription>
+            Please read the following terms carefully.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-y-auto flex-1 py-4 pe-2">
+          <div className="space-y-4 text-sm text-muted-foreground">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+            <p>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo.
+            </p>
+            <p>
+              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
+              aut fugit, sed quia consequuntur magni dolores eos qui ratione
+              voluptatem sequi nesciunt.
+            </p>
+            <p>
+              Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+              consectetur, adipisci velit, sed quia non numquam eius modi tempora
+              incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+            </p>
+            <p>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur.
+            </p>
+            <p>
+              At vero eos et accusamus et iusto odio dignissimos ducimus qui
+              blanditiis praesentium voluptatum deleniti atque corrupti quos
+              dolores et quas molestias excepturi sint occaecati cupiditate non
+              provident.
+            </p>
+            <p>
+              Similique sunt in culpa qui officia deserunt mollitia animi, id est
+              laborum et dolorum fuga. Et harum quidem rerum facilis est et
+              expedita distinctio.
+            </p>
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Decline
+          </DialogClose>
+          <Button>Accept</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DialogStickyFooterDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Sticky Footer
+      </DialogTrigger>
+      <DialogContent className="max-h-[80vh] overflow-hidden flex flex-col gap-0 p-0">
+        <DialogHeader className="p-6 pb-4">
+          <DialogTitle>Edit Settings</DialogTitle>
+          <DialogDescription>
+            Configure your application settings below. The footer stays fixed at
+            the bottom.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-y-auto flex-1 px-6 py-4">
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="app-name">Application Name</Label>
+              <Input id="app-name" defaultValue="My Application" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="app-url">Application URL</Label>
+              <Input id="app-url" defaultValue="https://example.com" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="api-key">API Key</Label>
+              <Input id="api-key" defaultValue="sk-xxxxxxxxxxxx" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="webhook">Webhook URL</Label>
+              <Input id="webhook" defaultValue="https://example.com/webhook" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="callback">Callback URL</Label>
+              <Input id="callback" defaultValue="https://example.com/callback" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="redirect">Redirect URL</Label>
+              <Input id="redirect" defaultValue="https://example.com/redirect" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Input id="description" defaultValue="A sample application" />
+            </div>
+          </div>
+        </div>
+        <DialogFooter className="border-t border-border p-6 pt-4">
+          <DialogClose render={<Button variant="outline" />}>
+            Cancel
+          </DialogClose>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const meta = {
+  title: "UI/Dialog",
+  component: Dialog,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <DialogDemo />,
+};
+
+export const CustomCloseButton: Story = {
+  render: () => <DialogCustomCloseDemo />,
+};
+
+export const NoCloseButton: Story = {
+  render: () => <DialogNoCloseButtonDemo />,
+};
+
+export const ScrollableContent: Story = {
+  render: () => <DialogScrollableDemo />,
+};
+
+export const StickyFooter: Story = {
+  render: () => <DialogStickyFooterDemo />,
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..fbc53b3
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+import { useThemeOptional, defaultCssVariables } from "@/providers"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/50 duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 z-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  const theme = useThemeOptional()
+  const mode = theme?.mode ?? "light"
+  const cssVariables = theme?.cssVariables ?? defaultCssVariables
+  return (
+    <DialogPortal className={cn("pui-root", mode)} style={cssVariables}>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-lg border border-border p-6 shadow-lg duration-150 fixed top-1/2 start-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 end-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5 text-center sm:text-start", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 011e712..722eb83 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -152,6 +152,20 @@ export {
 // ColorPicker component
 export { ColorPicker, type ColorPickerProps } from "./color-picker";
 
+// Dialog component
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
 // Sheet component
 export {
   Sheet,
diff --git a/src/index.ts b/src/index.ts
index 3a51233..fa3e8d8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -72,6 +72,17 @@ export {
     CurrencyInput, DesignSystemSection,
     // DataViews
     DataViews,
+    // Dialog
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
     // DropdownMenu
     DropdownMenu,
     DropdownMenuCheckboxItem,