diff --git a/src/components/lists/List.stories.jsx b/src/components/lists/List.stories.jsx
new file mode 100644
index 0000000..c736dc4
--- /dev/null
+++ b/src/components/lists/List.stories.jsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { List } from "./List"
+
+
+export default {
+    component: List,
+    title: "Lists/List",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Unordered = props => (
+    <List {...props}>
+        <List.Item>Io</List.Item>
+        <List.Item>Gyrocopter</List.Item>
+        <List.Item>Chaos Knight</List.Item>
+    </List>
+)
+Unordered.args = {
+    ordered: false,
+}
+
+
+export const Ordered = Unordered.bind({})
+Ordered.args = {
+    ordered: true,
+}
diff --git a/src/components/lists/List.tsx b/src/components/lists/List.tsx
new file mode 100644
index 0000000..6931648
--- /dev/null
+++ b/src/components/lists/List.tsx
@@ -0,0 +1,36 @@
+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 ListProps {
+    ordered: boolean,
+
+    [props: string]: any,
+}
+
+
+export function List({ordered, ...props}: ListProps): JSX.Element {
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "list", ordered ? "list-ordered" : "list-unordered")
+
+    return (
+        <BaseElement kind={ordered ? "ol" : "ul"} {...props}/>
+    )
+}
+
+
+interface ListItemProps {
+    [props: string]: any,
+}
+
+
+List.Item = function({...props}: ListItemProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "list-item")
+
+    return (
+        <BaseElement kind={"li"} {...props}/>
+    )
+}