diff --git a/src/components/BoxView/RNBoxView.ts b/src/components/BoxView/RNBoxView.ts
index d748fae..9cc7e45 100644
--- a/src/components/BoxView/RNBoxView.ts
+++ b/src/components/BoxView/RNBoxView.ts
@@ -7,6 +7,7 @@ import {
 } from "@nodegui/nodegui";
 import { ViewProps, setViewProps } from "../View/RNView";
 import { RNComponent } from "../config";
+import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
 
 export interface BoxViewProps extends ViewProps<QBoxLayoutSignals> {
   direction?: Direction;
@@ -50,6 +51,9 @@ export class RNBoxView extends QWidget implements RNComponent {
     this.appendChild(child);
   }
   appendChild(child: NodeWidget<any>): void {
+    if (child instanceof NodeDialog) {
+      return;
+    }
     const updateChild = () => {
       this.layout?.addWidget(child);
       this.children.push(child);
@@ -73,6 +77,9 @@ export class RNBoxView extends QWidget implements RNComponent {
     updateChild();
   }
   insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    if (child instanceof NodeDialog) {
+      return;
+    }
     const prevIndex = this.children.indexOf(beforeChild);
 
     if (prevIndex === -1) {
diff --git a/src/components/ColorDialog/RNColorDialog.ts b/src/components/ColorDialog/RNColorDialog.ts
new file mode 100644
index 0000000..b6b2fa5
--- /dev/null
+++ b/src/components/ColorDialog/RNColorDialog.ts
@@ -0,0 +1,47 @@
+import { NodeWidget, QColor, QColorDialog, QColorDialogSignals } from "@nodegui/nodegui";
+import { ColorDialogOption } from "@nodegui/nodegui/dist/lib/QtWidgets/QColorDialog";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+import { DialogOption } from "../FileDialog/RNFileDialog";
+
+export interface ColorDialogProps extends DialogProps<QColorDialogSignals> {
+  currentColor?: QColor;
+  option?: DialogOption<ColorDialogOption>;
+  options?: ColorDialogOption;
+}
+
+function setColorDialogProps(widget: RNColorDialog, newProps: ColorDialogProps, oldProps: ColorDialogProps) {
+  const setter: ColorDialogProps = {
+    set currentColor(currentColor: QColor) {
+      widget.setCurrentColor(currentColor);
+    },
+    set option({ option, on }: DialogOption<ColorDialogOption>) {
+      widget.setOption(option, on);
+    },
+    set options(options: ColorDialogOption) {
+      widget.setOptions(options);
+    },
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNColorDialog extends QColorDialog implements RNWidget {
+  setProps(newProps: ColorDialogProps, oldProps: ColorDialogProps): void {
+    setColorDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "color-dialog";
+}
diff --git a/src/components/ColorDialog/index.ts b/src/components/ColorDialog/index.ts
new file mode 100644
index 0000000..d009a25
--- /dev/null
+++ b/src/components/ColorDialog/index.ts
@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { RNColorDialog, ColorDialogProps } from "./RNColorDialog";
+
+class ColorDialogConfig extends ComponentConfig {
+  tagName: string = RNColorDialog.tagName;
+  shouldSetTextContent(nextProps: ColorDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: ColorDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNColorDialog {
+    const widget = new RNColorDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNColorDialog, newProps: ColorDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNColorDialog, updatePayload: any, oldProps: ColorDialogProps, newProps: ColorDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up ColorDialog inheriting the functionality of nodegui's `QColorDialog`
+ * @example
+ * ```javascript
+ * function ColorDialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QColorDialogSignals>({
+ *    colorSelected(color){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <ColorDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const ColorDialog = registerComponent<ColorDialogProps>(new ColorDialogConfig());
diff --git a/src/components/Dialog/RNDialog.ts b/src/components/Dialog/RNDialog.ts
new file mode 100644
index 0000000..70f5a16
--- /dev/null
+++ b/src/components/Dialog/RNDialog.ts
@@ -0,0 +1,77 @@
+import { FlexLayout, FocusReason, NodeWidget, QDialog, QDialogSignals, QFont } from "@nodegui/nodegui";
+import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
+import { RNWidget } from "../config";
+import { setViewProps, ViewProps } from "../View/RNView";
+
+export interface DialogProps<T = QDialogSignals> extends ViewProps<T> {
+  open?: boolean;
+  font?: QFont;
+  focus?: FocusReason;
+  modal?: boolean;
+  result?: number;
+  reject?: boolean;
+  enableSizeGrip?: boolean;
+}
+
+export function setDialogProps(widget: RNDialog, newProps: DialogProps, oldProps: DialogProps) {
+  const setter: DialogProps = {
+    set open(open: boolean) {
+      open ? widget.open() : widget.close();
+    },
+    set font(font: QFont) {
+      widget.setFont(font);
+    },
+    set focus(focus: FocusReason) {
+      widget.setFocus(focus);
+    },
+    set modal(modal: boolean) {
+      widget.setModal(modal);
+    },
+    set reject(reject: boolean) {
+      reject && widget.reject();
+    },
+    set result(result: number) {
+      widget.setResult(result);
+    },
+    set enableSizeGrip(sizeGrip: boolean) {
+      widget.setSizeGripEnabled(sizeGrip);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+}
+
+export class RNDialog extends QDialog implements RNWidget {
+  setProps(newProps: DialogProps, oldProps: DialogProps): void {
+    setDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    this.appendChild(child);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    if (!child || child instanceof NodeDialog) {
+      return;
+    }
+    if (!this.layout) {
+      const flexLayout = new FlexLayout();
+      flexLayout.setFlexNode(this.getFlexNode());
+      this.setLayout(flexLayout);
+      this.layout = flexLayout;
+    }
+    this.layout.addWidget(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    if (child! instanceof NodeDialog) {
+      this.appendChild(child);
+    }
+  }
+  removeChild(child: NodeWidget<any>): void {
+    if (!this.layout) {
+      console.warn("parent has no layout to remove child from");
+      return;
+    }
+    this.layout.removeWidget(child);
+    child.close();
+  }
+  static tagName = "dialog";
+}
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
new file mode 100644
index 0000000..365feba
--- /dev/null
+++ b/src/components/Dialog/index.ts
@@ -0,0 +1,53 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { DialogProps, RNDialog } from "./RNDialog";
+
+class DialogConfig extends ComponentConfig {
+  tagName: string=RNDialog.tagName;
+  shouldSetTextContent(nextProps: DialogProps): boolean {
+    return false;
+  }
+  finalizeInitialChildren(
+    instance: RNDialog,
+    newProps: DialogProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  createInstance(newProps: DialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNDialog {
+    const widget = new RNDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNDialog, newProps: DialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNDialog, updatePayload: any, oldProps: DialogProps, newProps: DialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up Dialog inheriting the functionality of nodegui's `QDialog`
+ * @param minSize set minimum height, width to prevent errors
+ * @example 
+ * ```javascript
+ * function DialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  return (
+ *    <View>
+ *      <Dialog open={open}>
+ *        <View>{....other components}</View>
+ *      </Dialog>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const Dialog = registerComponent<DialogProps>(new DialogConfig());
\ No newline at end of file
diff --git a/src/components/FileDialog/RNFileDialog.ts b/src/components/FileDialog/RNFileDialog.ts
new file mode 100644
index 0000000..a4c7ce1
--- /dev/null
+++ b/src/components/FileDialog/RNFileDialog.ts
@@ -0,0 +1,63 @@
+import { NodeWidget, QFileDialog, DialogLabel, QFileDialogSignals, Option } from "@nodegui/nodegui";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+
+export interface FileDialogLabelText{
+  label: DialogLabel,
+  text: string
+}
+
+export interface DialogOption<T=Option> {
+  option: T;
+  on: boolean;
+}
+
+export interface FileDialogProps extends DialogProps<QFileDialogSignals>{
+  defaultSuffix?: string;
+  supportedSchemes?: string[];
+  labelText?: FileDialogLabelText;
+  option?: DialogOption,
+  options?: Option
+}
+
+function setFileDialogProps(widget: RNFileDialog, newProps: FileDialogProps, oldProps: FileDialogProps) {
+  const setter: FileDialogProps = {
+    set defaultSuffix(defaultSuffix: string) {
+      widget.setDefaultSuffix(defaultSuffix);
+    },
+    set supportedSchemes(supportedSchemes: string[]) {
+      widget.setSupportedSchemes(supportedSchemes);
+    },
+    set labelText(labelText: FileDialogLabelText) {
+      widget.setLabelText(labelText.label, labelText.text);
+    },
+    set option({option, on}: DialogOption) {
+      widget.setOption(option, on)
+    },
+    set options(options: Option) {
+      widget.setOptions(options);
+    }
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNFileDialog extends QFileDialog implements RNWidget {
+  setProps(newProps: FileDialogProps, oldProps: FileDialogProps): void {
+    setFileDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "file-dialog";
+}
diff --git a/src/components/FileDialog/index.ts b/src/components/FileDialog/index.ts
new file mode 100644
index 0000000..146c4f4
--- /dev/null
+++ b/src/components/FileDialog/index.ts
@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import {  RNFileDialog, FileDialogProps } from "./RNFileDialog";
+
+class FileDialogConfig extends ComponentConfig {
+  tagName: string=RNFileDialog.tagName;
+  shouldSetTextContent(nextProps: FileDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: FileDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNFileDialog {
+    const widget = new RNFileDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNFileDialog, newProps: FileDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNFileDialog, updatePayload: any, oldProps: FileDialogProps, newProps: FileDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up FileDialog inheriting the functionality of nodegui's `QFileDialog`
+ * @example 
+ * ```javascript
+ * function DialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QFileDialogSignals>({
+ *    fileSelected(file){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <FileDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const FileDialog = registerComponent<FileDialogProps>(new FileDialogConfig());
\ No newline at end of file
diff --git a/src/components/FontDialog/RNFontDialog.ts b/src/components/FontDialog/RNFontDialog.ts
new file mode 100644
index 0000000..19771a6
--- /dev/null
+++ b/src/components/FontDialog/RNFontDialog.ts
@@ -0,0 +1,46 @@
+import { FontDialogOption, NodeWidget, QFont, QFontDialog, QFontDialogSignals } from "@nodegui/nodegui";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+import { DialogOption } from "../FileDialog/RNFileDialog";
+
+export interface FontDialogProps extends DialogProps<QFontDialogSignals> {
+  currentFont?: QFont;
+  option?: DialogOption<FontDialogOption>;
+  options?: FontDialogOption;
+}
+
+function setFontDialogProps(widget: RNFontDialog, newProps: FontDialogProps, oldProps: FontDialogProps) {
+  const setter: FontDialogProps = {
+    set currentFont(currentFont: QFont) {
+      widget.setCurrentFont(currentFont);
+    },
+    set option({ option, on }: DialogOption<FontDialogOption>) {
+      widget.setOption(option, on);
+    },
+    set options(options: FontDialogOption) {
+      widget.setOptions(options);
+    },
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNFontDialog extends QFontDialog implements RNWidget {
+  setProps(newProps: FontDialogProps, oldProps: FontDialogProps): void {
+    setFontDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "font-dialog";
+}
diff --git a/src/components/FontDialog/index.ts b/src/components/FontDialog/index.ts
new file mode 100644
index 0000000..cd06167
--- /dev/null
+++ b/src/components/FontDialog/index.ts
@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { RNFontDialog, FontDialogProps } from "./RNFontDialog";
+
+class FontDialogConfig extends ComponentConfig {
+  tagName: string = RNFontDialog.tagName;
+  shouldSetTextContent(nextProps: FontDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: FontDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNFontDialog {
+    const widget = new RNFontDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNFontDialog, newProps: FontDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNFontDialog, updatePayload: any, oldProps: FontDialogProps, newProps: FontDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up FontDialog inheriting the functionality of nodegui's `QFontDialog`
+ * @example
+ * ```javascript
+ * function FontDialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QFontDialogSignals>({
+ *    fontSelected(font){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <FontDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const FontDialog = registerComponent<FontDialogProps>(new FontDialogConfig());
diff --git a/src/components/InputDialog/RNInputDialog.ts b/src/components/InputDialog/RNInputDialog.ts
new file mode 100644
index 0000000..3c0be4a
--- /dev/null
+++ b/src/components/InputDialog/RNInputDialog.ts
@@ -0,0 +1,101 @@
+import { EchoMode, InputDialogOptions, InputMode, NodeWidget, QInputDialog, QInputDialogSignals } from "@nodegui/nodegui";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+
+export interface InputDialogProps extends DialogProps<QInputDialogSignals>{
+  cancelButtonText?: string,
+  comboBoxEditable?: boolean,
+  doubleDecimals?: number,
+  doubleMax?: number,
+  doubleMin?: number,
+  doubleStep?: number,
+  doubleValue?: number,
+  inputMode?: InputMode,
+  intMax?: number,
+  intMin?: number,
+  intStep?: number,
+  intValue?: number,
+  labelText?: string,
+  okButtonText?: string,
+  options?: InputDialogOptions,
+  textEchoMode?: EchoMode,
+  textValue?: string
+}
+
+function setInputDialogProps(widget: RNInputDialog, newProps: InputDialogProps, oldProps: InputDialogProps) {
+  const setter: InputDialogProps = {
+    set cancelButtonText(cancelButtonText: string){
+      widget.setCancelButtonText(cancelButtonText)
+    },
+    set comboBoxEditable(comboBoxEditable: boolean) {
+      widget.setComboBoxEditable(comboBoxEditable);
+    },
+    set doubleDecimals(doubleDecimals: number){
+      widget.setDoubleDecimals(doubleDecimals)
+    },
+    set doubleMax(doubleMax: number){
+      widget.setDoubleMaximum(doubleMax)
+    },
+    set doubleMin(doubleMin: number){
+      widget.setDoubleMinimum(doubleMin)
+    },
+    set doubleStep(doubleStep: number){
+      widget.setDoubleStep(doubleStep)
+    },
+    set doubleValue(doubleValue: number){
+      widget.setDoubleValue(doubleValue)
+    },
+    set inputMode(inputMode: InputMode){
+      widget.setInputMode(inputMode)
+    },
+    set intMax(intMax: number){
+      widget.setIntMaximum(intMax)
+    },
+    set intMin(intMi: number){
+      widget.setIntMinimum(intMi)
+    },
+    set intStep(intStep: number){
+      widget.setIntStep(intStep)
+    },
+    set intValue(intValue: number){
+      widget.setIntValue(intValue)
+    },
+    set labelText(labelText: string){
+      widget.setLabelText(labelText)
+    },
+    set okButtonText(okButtonText: string){
+      widget.setOkButtonText(okButtonText)
+    },
+    set options(options: InputDialogOptions){
+      widget.setOptions(options)
+    },
+    set textEchoMode(textEchoMode: EchoMode){
+      widget.setTextEchoMode(textEchoMode)
+    },
+    set textValue(textValue: string){
+      widget.setTextValue(textValue)
+    },
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNInputDialog extends QInputDialog implements RNWidget {
+  setProps(newProps: InputDialogProps, oldProps: InputDialogProps): void {
+    setInputDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "input-dialog";
+}
diff --git a/src/components/InputDialog/index.ts b/src/components/InputDialog/index.ts
new file mode 100644
index 0000000..6c7d2ad
--- /dev/null
+++ b/src/components/InputDialog/index.ts
@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { RNInputDialog, InputDialogProps } from "./RNInputDialog";
+
+class InputDialogConfig extends ComponentConfig {
+  tagName: string = RNInputDialog.tagName;
+  shouldSetTextContent(nextProps: InputDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: InputDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNInputDialog {
+    const widget = new RNInputDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNInputDialog, newProps: InputDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNInputDialog, updatePayload: any, oldProps: InputDialogProps, newProps: InputDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up InputDialog inheriting the functionality of nodegui's `QInputDialog`
+ * @example
+ * ```javascript
+ * function DialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QInputDialogSignals>({
+ *    textValueChanged(value){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <InputDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const InputDialog = registerComponent<InputDialogProps>(new InputDialogConfig());
diff --git a/src/components/ProgressDialog/RNProgressDialog.ts b/src/components/ProgressDialog/RNProgressDialog.ts
new file mode 100644
index 0000000..94c000c
--- /dev/null
+++ b/src/components/ProgressDialog/RNProgressDialog.ts
@@ -0,0 +1,88 @@
+import { NodeWidget, QProgressDialog, QProgressDialogSignals } from "@nodegui/nodegui";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+
+interface ProgressBarRange {
+  max: number;
+  min: number;
+}
+
+export interface ProgressDialogProps extends DialogProps<QProgressDialogSignals> {
+  autoClose?: boolean;
+  autoReset?: boolean;
+  cancelButtonText?: string;
+  labelText?: string;
+  maxValue?: number;
+  minValue?: number;
+  /**
+   * This property holds the time(`in milliseconds`) that must pass before the dialog appears.
+   * 
+   * https://doc.qt.io/qt-5/qprogressdialog.html#minimumDuration-prop
+   * @default 4
+   */
+  minDuration?: number;
+  range?: ProgressBarRange;
+  value?: number;
+  /**
+   * Set this to `false` to allow the progress dialog opening
+   * automatically when window first mounts
+   */
+  shouldReset?: boolean;
+}
+
+function setProgressDialogProps(widget: RNProgressDialog, newProps: ProgressDialogProps, oldProps: ProgressDialogProps) {
+  const setter: ProgressDialogProps = {
+    set shouldReset(shouldReset: boolean) {
+      shouldReset && widget.reset();
+    },
+    set autoClose(autoClose: boolean) {
+      widget.setAutoClose(autoClose);
+    },
+    set autoReset(autoReset: boolean) {
+      widget.setAutoReset(autoReset);
+    },
+    set cancelButtonText(cancelButtonText: string) {
+      widget.setCancelButtonText(cancelButtonText);
+    },
+    set labelText(labelText: string) {
+      widget.setLabelText(labelText);
+    },
+    set maxValue(maxValue: number) {
+      widget.setMaximum(maxValue);
+    },
+    set minValue(minValue: number) {
+      widget.setMinimum(minValue);
+    },
+    set minDuration(minDuration: number) {
+      widget.setMinimumDuration(minDuration);
+    },
+    set range({ max, min }: ProgressBarRange) {
+      widget.setRange(min, max);
+    },
+    set value(value: number) {
+      widget.setValue(value);
+    },
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNProgressDialog extends QProgressDialog implements RNWidget {
+  setProps(newProps: ProgressDialogProps, oldProps: ProgressDialogProps): void {
+    setProgressDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "progress-dialog";
+}
diff --git a/src/components/ProgressDialog/index.ts b/src/components/ProgressDialog/index.ts
new file mode 100644
index 0000000..a9da8b2
--- /dev/null
+++ b/src/components/ProgressDialog/index.ts
@@ -0,0 +1,59 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { RNProgressDialog, ProgressDialogProps } from "./RNProgressDialog";
+
+class ProgressDialogConfig extends ComponentConfig {
+  tagName: string = RNProgressDialog.tagName;
+  shouldSetTextContent(nextProps: ProgressDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: ProgressDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNProgressDialog {
+    const widget = new RNProgressDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNProgressDialog, newProps: ProgressDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNProgressDialog, updatePayload: any, oldProps: ProgressDialogProps, newProps: ProgressDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up ProgressDialog inheriting the functionality of nodegui's `QProgressDialog`
+ * @example
+ * ```javascript
+ * function ProgressDialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QProgressDialogSignals>({
+ *    canceled(){
+ *        setOpen(false);
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ * const [value, setValue] = useState(0);
+ *  return (
+ *    <View>
+ *      <ProgressDialog
+ *        open={open}
+ *        on={events}
+ *        maxValue={100}
+ *        minValue={0}
+ *        value={value}
+ *      />
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *      <Button
+ *        text="Progress"
+ *        on={{clicked:()=>open && value < 100 &&setValue(value+5)}}
+ *      />
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const ProgressDialog = registerComponent<ProgressDialogProps>(new ProgressDialogConfig());
diff --git a/src/components/View/RNView.ts b/src/components/View/RNView.ts
index 823a1c8..93aea51 100644
--- a/src/components/View/RNView.ts
+++ b/src/components/View/RNView.ts
@@ -1,15 +1,6 @@
-import {
-  QWidget,
-  WindowState,
-  QCursor,
-  CursorShape,
-  NodeWidget,
-  QIcon,
-  FlexLayout,
-  WidgetEventTypes,
-  QWidgetSignals,
-} from "@nodegui/nodegui";
+import { QWidget, WindowState, QCursor, CursorShape, NodeWidget, QIcon, FlexLayout, WidgetEventTypes, QWidgetSignals } from "@nodegui/nodegui";
 import { NativeRawPointer } from "@nodegui/nodegui/dist/lib/core/Component";
+import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
 import { RNWidget, RNProps } from "../config";
 
 /**
@@ -126,11 +117,7 @@ export interface ViewProps<Signals extends {}> extends RNProps {
 /**
  * @ignore
  */
-export function setViewProps<Signals extends {}>(
-  widget: NodeWidget<any>,
-  newProps: ViewProps<Signals>,
-  oldProps: ViewProps<Signals>
-) {
+export function setViewProps<Signals extends {}>(widget: NodeWidget<any>, newProps: ViewProps<Signals>, oldProps: ViewProps<Signals>) {
   const setter: ViewProps<Signals> = {
     set visible(shouldShow: boolean) {
       shouldShow ? widget.show() : widget.hide();
@@ -145,12 +132,7 @@ export function setViewProps<Signals extends {}>(
       widget.setInlineStyle(inlineStyle);
     },
     set geometry(geometry: Geometry) {
-      widget.setGeometry(
-        geometry.x,
-        geometry.y,
-        geometry.width,
-        geometry.height
-      );
+      widget.setGeometry(geometry.x, geometry.y, geometry.width, geometry.height);
     },
     set id(id: string) {
       widget.setObjectName(id);
@@ -211,11 +193,9 @@ export function setViewProps<Signals extends {}>(
         }
       });
 
-      Object.entries(listenerMapLatest).forEach(
-        ([eventType, newEvtListener]) => {
-          widget.addEventListener(eventType as any, newEvtListener);
-        }
-      );
+      Object.entries(listenerMapLatest).forEach(([eventType, newEvtListener]) => {
+        widget.addEventListener(eventType as any, newEvtListener);
+      });
     },
     set attributes(attributesMap: WidgetAttributesMap) {
       Object.entries(attributesMap).forEach(([attribute, value]) => {
@@ -235,15 +215,12 @@ export function setViewProps<Signals extends {}>(
  * @ignore
  */
 export class RNView extends QWidget implements RNWidget {
-  setProps(
-    newProps: ViewProps<QWidgetSignals>,
-    oldProps: ViewProps<QWidgetSignals>
-  ): void {
+  setProps(newProps: ViewProps<QWidgetSignals>, oldProps: ViewProps<QWidgetSignals>): void {
     setViewProps(this, newProps, oldProps);
   }
   insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
-    if (!this.layout) {
-      console.warn("parent has no layout to insert child before another child");
+    if (!this.layout || child instanceof NodeDialog) {
+      !this.layout && console.warn("parent has no layout to insert child before another child");
       return;
     }
     (this.layout as FlexLayout).insertChildBefore(child, beforeChild);
@@ -253,7 +230,7 @@ export class RNView extends QWidget implements RNWidget {
     this.appendChild(child);
   }
   appendChild(child: NodeWidget<any>): void {
-    if (!child) {
+    if (!child || child instanceof NodeDialog) {
       return;
     }
     if (!this.layout) {
diff --git a/src/index.ts b/src/index.ts
index 4f002c6..95e0dad 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,6 +24,12 @@ export { ComboBox } from "./components/ComboBox";
 export { SystemTrayIcon } from "./components/SystemTrayIcon";
 export { Tabs } from "./components/Tab";
 export { TabItem } from "./components/TabItem";
+export { Dialog } from "./components/Dialog";
+export { ColorDialog } from "./components/ColorDialog";
+export { FileDialog } from "./components/FileDialog";
+export { FontDialog } from "./components/FontDialog";
+export { InputDialog } from "./components/InputDialog";
+export { ProgressDialog } from "./components/ProgressDialog";
 export { useEventHandler } from "./hooks";
 export { Renderer } from "./renderer";
 export { hot, appProxy } from "./development/hot-reload";