+ {[1, 2, 4, 8].map((thickness) => (
+
+
Divider/{thickness}px
+
+
+ ))}
+
+ ),
+};
diff --git a/src/components/Divider/Divider.style.ts b/src/components/Divider/Divider.style.ts
new file mode 100644
index 0000000..009b4b9
--- /dev/null
+++ b/src/components/Divider/Divider.style.ts
@@ -0,0 +1,10 @@
+import { styled } from 'styled-components';
+
+import { DividerThickness } from './Divider.type';
+
+export const StyledHr = styled.hr<{ $width?: number; $thickness: DividerThickness }>`
+ width: ${({ $width }) => ($width ? `${$width}px` : '100%')};
+ height: ${({ $thickness }) => `${$thickness}px`};
+ background: ${({ theme }) => theme.semantic.color.bgBasicStrong};
+ border: 0;
+`;
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
new file mode 100644
index 0000000..b29e466
--- /dev/null
+++ b/src/components/Divider/Divider.tsx
@@ -0,0 +1,6 @@
+import { StyledHr } from './Divider.style';
+import { DividerProps } from './Divider.type';
+
+export const Divider = ({ width, thickness }: DividerProps) => {
+ return