diff --git a/src/components/separators/Separator.stories.jsx b/src/components/separators/Separator.stories.jsx
new file mode 100644
index 0000000..73f4831
--- /dev/null
+++ b/src/components/separators/Separator.stories.jsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Separator } from "./Separator"
+
+
+export default {
+    component: Separator,
+    title: "Separator/Separator",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Regular = props => (
+    <Separator {...props}/>
+)
+Regular.args = {
+    weight: "regular",
+}
+
+
+export const Heavy = Regular.bind({})
+Heavy.args = {
+    weight: "heavy",
+}
+
+
+export const Light = Regular.bind({})
+Light.args = {
+    weight: "light",
+}
+
diff --git a/src/components/separators/Separator.tsx b/src/components/separators/Separator.tsx
new file mode 100644
index 0000000..fc5026c
--- /dev/null
+++ b/src/components/separators/Separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface SeparatorProps {
+    weight?: "light" | "regular" | "heavy",
+
+    [props: string]: any,
+}
+
+
+const WEIGHT_CLASSES = {
+    light: "separator-light",
+    regular: "",
+    heavy: "separator-heavy",
+}
+
+
+export function Separator({weight = "regular", ...props}: SeparatorProps): JSX.Element {
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "separator", WEIGHT_CLASSES[weight])
+
+    return (
+        <BaseElement kind={"hr"} {...props}/>
+    )
+}