diff --git a/src/components/Checkbox/Checkbox.styles.ts b/src/components/Checkbox/Checkbox.styles.ts
index 13b77731..6ffb6bc2 100644
--- a/src/components/Checkbox/Checkbox.styles.ts
+++ b/src/components/Checkbox/Checkbox.styles.ts
@@ -19,6 +19,7 @@ export const defaultConfig = {
   flexDirection: 'column',
   alignItems: 'flex-start',
   gap: '$space-component-gap-xSmall',
+  w: 'max-content',
   minWidth: '$size-3xSmall',
   minHeight: '$size-3xSmall',
   color: '$color-content-primary',
diff --git a/src/components/Dialog/AdditionalElementWrapper.tsx b/src/components/Dialog/AdditionalElementWrapper.tsx
new file mode 100644
index 00000000..dfb03ec0
--- /dev/null
+++ b/src/components/Dialog/AdditionalElementWrapper.tsx
@@ -0,0 +1,38 @@
+import { FC, isValidElement, PropsWithChildren } from 'react';
+
+import { checkIfChildrenIsCustomComponent } from './utils';
+
+import { tet } from '@/tetrisly';
+
+type AdditionalElementWrapperProps = PropsWithChildren;
+
+export const AdditionalElementWrapper: FC<AdditionalElementWrapperProps> = ({
+  children,
+}) => {
+  const isCustomComponent =
+    isValidElement(children) && checkIfChildrenIsCustomComponent(children);
+
+  return isCustomComponent ? (
+    <tet.div
+      data-testid="dialog-additional-child"
+      backgroundColor="$color-background-neutral-subtle"
+      w="100%"
+      h="100%"
+    >
+      {children}
+    </tet.div>
+  ) : (
+    <>
+      <tet.div
+        data-testid="dialog-additional-child"
+        display="flex"
+        alignItems="center"
+        w="100%"
+        h="100%"
+      >
+        {children}
+      </tet.div>
+      <tet.div maxW="100%" />
+    </>
+  );
+};
diff --git a/src/components/Dialog/AllComponents.tsx b/src/components/Dialog/AllComponents.tsx
new file mode 100644
index 00000000..9946dc3d
--- /dev/null
+++ b/src/components/Dialog/AllComponents.tsx
@@ -0,0 +1,10 @@
+import * as components from '../../index';
+
+const allComponents = Array.from(Object.values(components));
+const allComponentsProps = await Promise.all(
+  allComponents.map(
+    (component) => import(`../${component}.props.ts/${component}Props`),
+  ),
+);
+
+export { allComponents, allComponentsProps };
diff --git a/src/components/Dialog/Dialog.props.ts b/src/components/Dialog/Dialog.props.ts
new file mode 100644
index 00000000..d26ddb0c
--- /dev/null
+++ b/src/components/Dialog/Dialog.props.ts
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { DialogConfig } from './Dialog.styles';
+import { DialogFooter, DialogIntent, DialogSize } from './types';
+
+import type { Action } from '@/types';
+
+export type DialogProps = {
+  actions?: Action[];
+  children?: ReactNode;
+  content?: string;
+  custom?: DialogConfig;
+  docsPresentation?: boolean;
+  footer?: DialogFooter;
+  onCloseClick?: (e: React.MouseEvent) => void;
+  intent?: DialogIntent;
+  size?: DialogSize;
+  title?: string;
+};
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
new file mode 100644
index 00000000..ec2a5ff7
--- /dev/null
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -0,0 +1,211 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Dialog } from './Dialog';
+import { customStyleForDocs } from './Dialog.styles';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { Dimmer } from '../Dimmer';
+
+import { DialogDocs } from '@/docs-components/DialogDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  argTypes: {
+    docsPresentation: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    title: 'Title',
+    actions: [
+      {
+        label: 'Primary action',
+        onClick: action('onClick'),
+      },
+      {
+        label: 'Secondary action',
+        onClick: action('onClick'),
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A temporary, focused window that overlays the main content. Often used to prompt user input or present important information that requires interaction, such as confirmation or error messages.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/dialog">
+          <DialogDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'steps',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'small',
+    custom: customStyleForDocs,
+  },
+};
+
+export const Decision: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="decision"
+        actions={[{ label: 'Cancel' }, { label: 'Accept' }]}
+      />
+    </tet.div>
+  ),
+};
+
+export const Confirmation: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="confirmation"
+        actions={[{ label: 'Accept' }]}
+        intent="warning"
+      />
+    </tet.div>
+  ),
+};
+
+export const Steps: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="steps"
+        actions={[{ label: 'Previous step' }, { label: 'Next step' }]}
+      />
+    </tet.div>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <tet.div
+      padding="40"
+      h="400px"
+      borderRadius={10}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Dimmer />
+      <Dialog
+        title="Title"
+        content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+        footer="decision"
+        actions={[{ label: 'Cancel' }, { label: 'Remove' }]}
+        intent="destructive"
+      />
+    </tet.div>
+  ),
+};
+
+export const NestedComponentInsideFooter: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <Checkbox label="Do not show me again" />,
+  },
+};
+
+export const NestedButtonInsideFooter: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <Button label="Find out more" />,
+  },
+};
+
+export const AdditionalCustomContent: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: <div>Additional component</div>,
+  },
+};
+
+export const AdditionalCustomContentWithButton: Story = {
+  args: {
+    title: 'title',
+    content: 'content',
+    onCloseClick: () => {},
+    footer: 'decision',
+    actions: [{ label: 'first action' }, { label: 'second action' }],
+    size: 'medium',
+    custom: customStyleForDocs,
+    children: (
+      <div>
+        Additional component with button
+        <br />
+        <Button label="button" />
+      </div>
+    ),
+  },
+};
diff --git a/src/components/Dialog/Dialog.styles.ts b/src/components/Dialog/Dialog.styles.ts
new file mode 100644
index 00000000..cfb8d4a3
--- /dev/null
+++ b/src/components/Dialog/Dialog.styles.ts
@@ -0,0 +1,105 @@
+import { DialogFooter, DialogIntent, DialogSize } from './types';
+
+import { BaseProps } from '@/types';
+
+export type DialogConfig = {
+  usagePositioning?: BaseProps;
+  footer?: {
+    type: Record<DialogFooter, BaseProps>;
+  } & BaseProps;
+  closeIcon?: BaseProps;
+  content?: BaseProps;
+  header?: BaseProps;
+  intentIcon?: Record<Partial<DialogIntent>, BaseProps>;
+  size?: Record<DialogSize, BaseProps>;
+  title?: BaseProps;
+  titleContainer?: BaseProps;
+} & BaseProps;
+
+export const defaultConfig = {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '$space-component-padding-2xLarge',
+  borderRadius: '$border-radius-xLarge',
+  gap: '$space-component-gap-xLarge',
+  boxShadow: '$elevation-bottom-400',
+  backgroundColor: '$color-interaction-background-modal',
+  position: 'fixed',
+  zIndex: 9998,
+  overflowY: 'hidden',
+  overflowX: 'hidden',
+  left: '50%',
+  top: '50%',
+  transform: ' translate(-50%, -50%)',
+  closeIcon: {
+    color: '$color-action-neutral-normal',
+  },
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$space-component-gap-large',
+    type: {
+      confirmation: {
+        justifyContent: 'end',
+      },
+      steps: {
+        justifyContent: 'space-between',
+      },
+      decision: {
+        justifyContent: 'end',
+      },
+    },
+  },
+  size: {
+    small: {
+      w: '480px',
+    },
+    medium: {
+      w: '720px',
+    },
+    large: {
+      w: '960px',
+    },
+  },
+  content: {
+    text: '$typo-body-medium',
+    color: '$color-content-secondary',
+  },
+  intentIcon: {
+    warning: {
+      color: '$color-content-warning-secondary',
+    },
+    destructive: {
+      color: '$color-content-negative-secondary',
+    },
+    none: {},
+  },
+  header: {
+    display: 'flex',
+    gap: '$space-component-gap-large',
+  },
+  titleContainer: {
+    w: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$space-component-gap-large',
+  },
+  title: {
+    w: '100%',
+    text: '$typo-header-xLarge',
+  },
+} satisfies DialogConfig;
+
+export const dialogStyles = {
+  defaultConfig,
+};
+
+export const customStyleForDocs: DialogConfig = {
+  position: 'static',
+  zIndex: 0,
+  overflowY: 'visible',
+  overflowX: 'visible',
+  left: '0%',
+  top: '0%',
+  transform: ' translate(0%, 0%)',
+};
diff --git a/src/components/Dialog/Dialog.test.tsx b/src/components/Dialog/Dialog.test.tsx
new file mode 100644
index 00000000..4482fb09
--- /dev/null
+++ b/src/components/Dialog/Dialog.test.tsx
@@ -0,0 +1,85 @@
+import { vi } from 'vitest';
+
+import { Dialog } from './Dialog';
+import { render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const getDialog = (jsx: JSX.Element) => {
+  const { getByTestId, queryByTestId } = render(jsx);
+  return {
+    additionalAction: queryByTestId('dialog-additional-action'),
+    closeIcon: queryByTestId('dialog-close-icon'),
+    dialog: getByTestId('dialog'),
+    dialogTitle: getByTestId('dialog-title'),
+    intentIcon: queryByTestId('dialog-intent-icon'),
+  };
+};
+
+const handleEventMock = vi.fn();
+
+describe('Dialog', () => {
+  it('should render the dialog', () => {
+    const { dialog } = getDialog(<Dialog />);
+    expect(dialog).toBeInTheDocument();
+  });
+
+  customPropTester(<Dialog />, {
+    containerId: 'dialog',
+    props: {
+      footer: ['confirmation', 'decision', 'steps'],
+      intent: ['destructive', 'warning', 'none'],
+      size: ['small', 'medium', 'large'],
+    },
+  });
+
+  it('should render the intent icon (warning)', () => {
+    const { intentIcon } = getDialog(<Dialog intent="warning" />);
+    expect(intentIcon).toBeInTheDocument();
+  });
+
+  it('should render the intent icon (destructive)', () => {
+    const { intentIcon } = getDialog(<Dialog intent="destructive" />);
+    expect(intentIcon).toBeInTheDocument();
+  });
+
+  it('should not render the intent icon (none)', () => {
+    const { intentIcon } = getDialog(<Dialog intent="none" />);
+    expect(intentIcon).toBeNull();
+  });
+
+  it('should render the close icon', () => {
+    const { closeIcon } = getDialog(<Dialog onCloseClick={handleEventMock} />);
+    expect(closeIcon).toBeInTheDocument();
+  });
+
+  it('should render the close icon', () => {
+    const { closeIcon } = getDialog(<Dialog />);
+    expect(closeIcon).toBeNull();
+  });
+
+  it('should emit on close', () => {
+    const { dialog } = getDialog(<Dialog onCloseClick={handleEventMock} />);
+    const button = dialog.querySelector('button');
+    button?.click();
+    expect(handleEventMock).toHaveBeenCalled();
+  });
+
+  it('should render both action buttons in case an array is provided', () => {
+    const { dialog } = getDialog(
+      <Dialog
+        onCloseClick={handleEventMock}
+        actions={[{ label: 'Label' }, { label: 'Label' }]}
+      />,
+    );
+    const buttons = dialog.getElementsByTagName('button');
+
+    expect(buttons[0]).toBeInTheDocument();
+    expect(buttons[1]).toBeInTheDocument();
+  });
+
+  it('should render proper title', () => {
+    const { dialogTitle } = getDialog(<Dialog title="dialog title" />);
+    expect(dialogTitle).toHaveTextContent('dialog title');
+  });
+});
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
new file mode 100644
index 00000000..c6542375
--- /dev/null
+++ b/src/components/Dialog/Dialog.tsx
@@ -0,0 +1,94 @@
+import { Icon } from '@virtuslab/tetrisly-icons';
+import { Props } from '@xstyled/styled-components';
+import { FC, useMemo } from 'react';
+
+import { AdditionalElementWrapper } from './AdditionalElementWrapper';
+import { DialogProps } from './Dialog.props';
+import { stylesBuilder } from './stylesBuilder';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { IconButton } from '../IconButton';
+
+import { tet } from '@/tetrisly';
+
+export const Dialog: FC<DialogProps> = ({
+  actions,
+  children,
+  content,
+  onCloseClick,
+  size = 'small',
+  title = '',
+  footer = 'decision',
+  intent = 'none',
+  custom,
+  ...restProps
+}) => {
+  const styles = useMemo(
+    () => stylesBuilder(size, footer, intent, custom),
+    [size, footer, intent, custom],
+  );
+  const hasChildren = !!children;
+  const hasCloseIcon = !!onCloseClick;
+  const hasIntentIcon = intent !== 'none';
+  const intentIconName =
+    intent === 'destructive' ? '20-alert-fill' : '20-warning-fill';
+
+  return (
+    <tet.div {...styles.container} data-testid="dialog" {...restProps}>
+      <tet.div {...styles.header} data-testid="dialog-header">
+        <tet.span
+          {...styles.titleContainer}
+          data-testid="dialog-title-container"
+        >
+          {hasIntentIcon && (
+            <tet.span {...styles.intentIcon} data-testid="dialog-intent-icon">
+              <Icon name={intentIconName} />
+            </tet.span>
+          )}
+          <tet.span {...styles.title} data-testid="dialog-title">
+            {title}
+          </tet.span>
+          {hasCloseIcon && (
+            <tet.span {...styles.closeIcon} data-testid="dialog-close-icon">
+              <IconButton
+                icon="20-close"
+                variant="ghost"
+                onClick={onCloseClick}
+              />
+            </tet.span>
+          )}
+        </tet.span>
+      </tet.div>
+      <tet.div {...styles.content} data-testid="dialog-content">
+        {content}
+      </tet.div>
+      {actions && (
+        <tet.div data-testid="dialog-footer" {...styles.footer}>
+          {hasChildren && footer !== 'steps' && (
+            <AdditionalElementWrapper>{children}</AdditionalElementWrapper>
+          )}
+          {actions &&
+            actions.map((action, index) => {
+              const appearance =
+                index !== 0 || actions.length === 1 ? 'primary' : 'secondary';
+              const buttonIntent =
+                intent === 'destructive' && index === 1
+                  ? 'destructive'
+                  : 'none';
+              return (
+                <Button
+                  key={action.label}
+                  appearance={appearance}
+                  intent={buttonIntent}
+                  {...action}
+                />
+              );
+            })}
+        </tet.div>
+      )}
+    </tet.div>
+  );
+};
+
+const DialogBase = Dialog as Props;
+DialogBase.Item = Button || Checkbox;
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
new file mode 100644
index 00000000..00a6882d
--- /dev/null
+++ b/src/components/Dialog/index.ts
@@ -0,0 +1,3 @@
+export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog.props';
+export { dialogStyles } from './Dialog.styles';
diff --git a/src/components/Dialog/stylesBuilder.ts b/src/components/Dialog/stylesBuilder.ts
new file mode 100644
index 00000000..dd27951b
--- /dev/null
+++ b/src/components/Dialog/stylesBuilder.ts
@@ -0,0 +1,51 @@
+import { defaultConfig, DialogConfig } from './Dialog.styles';
+import { DialogSize, DialogFooter, DialogIntent } from './types';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types';
+
+type StylesBuilderParams = {
+  footer: BaseProps;
+  closeIcon: BaseProps;
+  container: BaseProps;
+  content: BaseProps;
+  intentIcon: BaseProps;
+  header: BaseProps;
+  title: BaseProps;
+  titleContainer: BaseProps;
+};
+
+export const stylesBuilder = (
+  size: DialogSize,
+  footer: DialogFooter,
+  intent: DialogIntent,
+  custom?: DialogConfig,
+): StylesBuilderParams => {
+  const {
+    closeIcon,
+    size: containerSize,
+    footer: footerContainer,
+    intentIcon,
+    content,
+    header,
+    title,
+    titleContainer,
+    ...container
+  } = mergeConfigWithCustom({ defaultConfig, custom });
+
+  const { type, ...restFooterContainer } = footerContainer;
+  const containerStyles = { ...containerSize[size], ...container };
+  const footerStyles = { ...type[footer], ...restFooterContainer };
+  const intentIconStyles = { ...intentIcon[intent] };
+
+  return {
+    closeIcon,
+    container: containerStyles,
+    content,
+    footer: footerStyles,
+    intentIcon: intentIconStyles,
+    header,
+    title,
+    titleContainer,
+  };
+};
diff --git a/src/components/Dialog/types/DialogFooter.type.ts b/src/components/Dialog/types/DialogFooter.type.ts
new file mode 100644
index 00000000..28b52041
--- /dev/null
+++ b/src/components/Dialog/types/DialogFooter.type.ts
@@ -0,0 +1 @@
+export type DialogFooter = 'confirmation' | 'decision' | 'steps';
diff --git a/src/components/Dialog/types/DialogIntent.type.ts b/src/components/Dialog/types/DialogIntent.type.ts
new file mode 100644
index 00000000..d76973c1
--- /dev/null
+++ b/src/components/Dialog/types/DialogIntent.type.ts
@@ -0,0 +1 @@
+export type DialogIntent = 'destructive' | 'warning' | 'none';
diff --git a/src/components/Dialog/types/DialogSize.type.ts b/src/components/Dialog/types/DialogSize.type.ts
new file mode 100644
index 00000000..3bc6da0c
--- /dev/null
+++ b/src/components/Dialog/types/DialogSize.type.ts
@@ -0,0 +1 @@
+export type DialogSize = 'small' | 'medium' | 'large';
diff --git a/src/components/Dialog/types/index.ts b/src/components/Dialog/types/index.ts
new file mode 100644
index 00000000..277ccabe
--- /dev/null
+++ b/src/components/Dialog/types/index.ts
@@ -0,0 +1,3 @@
+export type { DialogFooter } from './DialogFooter.type';
+export type { DialogIntent } from './DialogIntent.type';
+export type { DialogSize } from './DialogSize.type';
diff --git a/src/components/Dialog/utils.ts b/src/components/Dialog/utils.ts
new file mode 100644
index 00000000..ecde3b22
--- /dev/null
+++ b/src/components/Dialog/utils.ts
@@ -0,0 +1,12 @@
+export const checkIfChildrenIsCustomComponent = (
+  element: React.ReactElement<unknown>,
+) => {
+  const { type } = element;
+  const displayName =
+    typeof type === 'function' || typeof type === 'object'
+      ? (type as React.FunctionComponent).displayName ||
+        (type as React.FunctionComponent).name ||
+        'Unknown'
+      : undefined;
+  return !displayName;
+};
diff --git a/src/docs-components/DialogDocs.tsx b/src/docs-components/DialogDocs.tsx
new file mode 100644
index 00000000..68e4403a
--- /dev/null
+++ b/src/docs-components/DialogDocs.tsx
@@ -0,0 +1,50 @@
+import { capitalize } from 'lodash';
+
+import { SectionHeader } from './common/SectionHeader';
+
+import { Dialog } from '@/components/Dialog';
+import { customStyleForDocs } from '@/components/Dialog/Dialog.styles';
+import { tet } from '@/tetrisly';
+
+const sizes = ['small', 'medium', 'large'] as const;
+
+export const DialogDocs = () => (
+  <>
+    {sizes.map((size, i) => (
+      <tet.section
+        key={size[i]}
+        display="flex"
+        padding="40px 0px"
+        flexDirection="column"
+      >
+        <SectionHeader px="$dimension-1600" variant="H1" my="auto">
+          {capitalize(size)}
+        </SectionHeader>
+        <tet.div
+          px="$dimension-1600"
+          borderBottomWidth="1px"
+          borderBottomColor="$color-border-neutral-subtle"
+        >
+          <tet.div
+            py="$dimension-500"
+            display="flex"
+            flexWrap="nowrap"
+            flexDirection="row"
+            gap="$dimension-500"
+            overflowX="scroll"
+          >
+            <tet.div padding="10px">
+              <Dialog
+                size={size}
+                title="Title"
+                content="Everything in Tetrisly contains Auto Layout. Moreover, we’ve redefined all variants and we have created brand-new components."
+                actions={[{ label: 'Action' }, { label: 'Primary action' }]}
+                custom={customStyleForDocs}
+              />
+            </tet.div>
+          </tet.div>
+        </tet.div>
+      </tet.section>
+    ))}
+  </>
+);
diff --git a/src/index.ts b/src/index.ts
index c794a3ec..9a5a3454 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,7 @@ export * from './components/Checkbox';
 export * from './components/CheckboxGroup';
 export * from './components/CornerDialog';
 export * from './components/Counter';
+export * from './components/Dialog';
 export * from './components/Dimmer';
 export * from './components/Divider';
 export * from './components/FileIcon';