diff --git a/src/components/Dimmer/Dimmer.props.ts b/src/components/Dimmer/Dimmer.props.ts
new file mode 100644
index 00000000..c95fc69e
--- /dev/null
+++ b/src/components/Dimmer/Dimmer.props.ts
@@ -0,0 +1,5 @@
+import { DimmerConfig } from './Dimmer.styles';
+
+export type DimmerProps = {
+ custom?: DimmerConfig;
+};
diff --git a/src/components/Dimmer/Dimmer.stories.tsx b/src/components/Dimmer/Dimmer.stories.tsx
new file mode 100644
index 00000000..78179c19
--- /dev/null
+++ b/src/components/Dimmer/Dimmer.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dimmer } from './Dimmer';
+import { Badge } from '../Badge';
+import { Card } from '../Card';
+
+import { DimmerDocs } from '@/docs-components/DimmerDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+ title: 'Dimmer',
+ component: Dimmer,
+ tags: ['autodocs'],
+ args: {},
+ parameters: {
+ backgrounds: {},
+ docs: {
+ description: {
+ component:
+ 'An overlay that darkens the background content to focus the users attention on another specific element or interaction, such as a Modal or Side Panel.',
+ },
+ page: () => (
+
+
+
+ ),
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
+
+export const WithCardComponent: Story = {
+ render: () => (
+ <>
+
+
+
+
+
+
+
+ Task:
+
+
+ Creating React components
+
+
+
+
+
+ Created
+
+
+ Mon, 14 Feb 2023
+
+
+
+
+ Last modified
+
+
+ Today, 5:23 am
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/components/Dimmer/Dimmer.styles.ts b/src/components/Dimmer/Dimmer.styles.ts
new file mode 100644
index 00000000..ff470cef
--- /dev/null
+++ b/src/components/Dimmer/Dimmer.styles.ts
@@ -0,0 +1,17 @@
+import type { BaseProps } from '@/types/BaseProps';
+
+export type DimmerConfig = BaseProps;
+
+export const defaultConfig = {
+ w: '100%',
+ h: '100%',
+ backgroundColor: '$color-interaction-background-dimmer',
+ top: 0,
+ left: 0,
+ position: 'absolute',
+ zIndex: 3,
+} satisfies DimmerConfig;
+
+export const dimmerStyles = {
+ defaultConfig,
+};
diff --git a/src/components/Dimmer/Dimmer.test.tsx b/src/components/Dimmer/Dimmer.test.tsx
new file mode 100644
index 00000000..63b2e446
--- /dev/null
+++ b/src/components/Dimmer/Dimmer.test.tsx
@@ -0,0 +1,25 @@
+import { Dimmer } from './Dimmer';
+import { render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const getDimmer = (jsx: JSX.Element) => {
+ const { getByTestId } = render(jsx);
+ return getByTestId('dimmer');
+};
+
+describe('Dimmer', () => {
+ it('should render the dimmer', () => {
+ const dimmer = getDimmer();
+ expect(dimmer).toBeInTheDocument();
+ });
+
+ it('should render correct color', () => {
+ const dimmer = getDimmer();
+ expect(dimmer).toHaveStyle('background-color: rgba(25, 39, 58, 0.741)');
+ });
+
+ customPropTester(, {
+ containerId: 'dimmer',
+ });
+});
diff --git a/src/components/Dimmer/Dimmer.tsx b/src/components/Dimmer/Dimmer.tsx
new file mode 100644
index 00000000..71a389f3
--- /dev/null
+++ b/src/components/Dimmer/Dimmer.tsx
@@ -0,0 +1,16 @@
+import { type FC, useMemo } from 'react';
+
+import type { DimmerProps } from './Dimmer.props';
+import { stylesBuilder } from './stylesBuilder';
+
+import { tet } from '@/tetrisly';
+import type { MarginProps } from '@/types';
+
+export const Dimmer: FC = ({
+ custom,
+ ...restProps
+}) => {
+ const styles = useMemo(() => stylesBuilder({ custom }), [custom]);
+
+ return ;
+};
diff --git a/src/components/Dimmer/index.ts b/src/components/Dimmer/index.ts
new file mode 100644
index 00000000..1e412629
--- /dev/null
+++ b/src/components/Dimmer/index.ts
@@ -0,0 +1,3 @@
+export { Dimmer } from './Dimmer';
+export type { DimmerProps } from './Dimmer.props';
+export { dimmerStyles } from './Dimmer.styles';
diff --git a/src/components/Dimmer/stylesBuilder.ts b/src/components/Dimmer/stylesBuilder.ts
new file mode 100644
index 00000000..6dc2bb9d
--- /dev/null
+++ b/src/components/Dimmer/stylesBuilder.ts
@@ -0,0 +1,27 @@
+import { DimmerProps } from './Dimmer.props';
+import { defaultConfig } from './Dimmer.styles';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types/BaseProps';
+
+type StylesBuilderParams = {
+ custom: DimmerProps['custom'];
+};
+
+type DimmerStylesBuilder = {
+ container: BaseProps;
+};
+
+export const stylesBuilder = ({
+ custom,
+}: StylesBuilderParams): DimmerStylesBuilder => {
+ const config = mergeConfigWithCustom({ defaultConfig, custom });
+
+ const { ...restStyles } = config;
+
+ return {
+ container: {
+ ...restStyles,
+ },
+ };
+};
diff --git a/src/docs-components/DimmerDocs.tsx b/src/docs-components/DimmerDocs.tsx
new file mode 100644
index 00000000..1801dee2
--- /dev/null
+++ b/src/docs-components/DimmerDocs.tsx
@@ -0,0 +1,14 @@
+import { Dimmer } from '@/components/Dimmer/Dimmer';
+import { tet } from '@/tetrisly';
+
+export const DimmerDocs = () => (
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/index.ts b/src/index.ts
index f7258878..e5f1ea6a 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/Dimmer';
export * from './components/Divider';
export * from './components/FileItem';
export * from './components/HelperText';