diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
new file mode 100644
index 0000000..094538d
--- /dev/null
+++ b/src/components/Divider.tsx
@@ -0,0 +1,29 @@
+import cx from 'clsx';
+import { Component, mergeProps } from 'solid-js';
+
+interface DividerProps {
+  direction?: 'horizontal' | 'vertical';
+  faded?: boolean;
+}
+
+const Divider: Component<DividerProps> = (props) => {
+  const mProps = mergeProps<DividerProps[]>(
+    {
+      direction: 'horizontal',
+      faded: false,
+    },
+    props,
+  );
+
+  return (
+    <hr
+      class={cx(
+        'border-solid',
+        mProps.direction === 'horizontal' ? 'w-full border-t' : 'h-full border-l',
+        mProps.faded ? 'border-outline/38' : 'border-outline',
+      )}
+    />
+  );
+};
+
+export default Divider;