diff --git a/src/components/BaseElement.stories.jsx b/src/components/BaseElement.stories.jsx
index 397a200..d1c64e2 100644
--- a/src/components/BaseElement.stories.jsx
+++ b/src/components/BaseElement.stories.jsx
@@ -12,8 +12,8 @@ export default {
     argTypes: {
         customColor: {
             control: {type: "color"},
-        }
-    }
+        },
+    },
 }
 
 
diff --git a/src/components/panels/Box.stories.jsx b/src/components/panels/Box.stories.jsx
new file mode 100644
index 0000000..d7c030d
--- /dev/null
+++ b/src/components/panels/Box.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Box } from "./Box"
+
+
+export default {
+    component: Box,
+    title: "Panels/Box",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Box {...props}>
+        This is a Box.
+    </Box>
+)
+Default.args = {}
diff --git a/src/components/panels/Box.tsx b/src/components/panels/Box.tsx
new file mode 100644
index 0000000..58ad875
--- /dev/null
+++ b/src/components/panels/Box.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface BoxProps {
+    [props: string]: any,
+}
+
+
+export function Box({...props}: BoxProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/components/panels/Dialog.stories.jsx b/src/components/panels/Dialog.stories.jsx
new file mode 100644
index 0000000..0fab4b9
--- /dev/null
+++ b/src/components/panels/Dialog.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Dialog } from "./Dialog"
+
+
+export default {
+    component: Dialog,
+    title: "Panels/Dialog",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Dialog {...props}>
+        This is a Dialog.
+    </Dialog>
+)
+Default.args = {}
diff --git a/src/components/panels/Dialog.tsx b/src/components/panels/Dialog.tsx
new file mode 100644
index 0000000..ceb02a0
--- /dev/null
+++ b/src/components/panels/Dialog.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface DialogProps {
+    [props: string]: any,
+}
+
+
+export function Dialog({...props}: DialogProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/components/panels/Panel.stories.jsx b/src/components/panels/Panel.stories.jsx
new file mode 100644
index 0000000..471a40a
--- /dev/null
+++ b/src/components/panels/Panel.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Panel } from "./Panel"
+
+
+export default {
+    component: Panel,
+    title: "Panels/Panel",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Panel {...props}>
+        This is a Panel.
+    </Panel>
+)
+Default.args = {}
diff --git a/src/components/panels/Panel.tsx b/src/components/panels/Panel.tsx
new file mode 100644
index 0000000..cdd54b8
--- /dev/null
+++ b/src/components/panels/Panel.tsx
@@ -0,0 +1,19 @@
+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 PanelProps {
+    [props: string]: any,
+}
+
+
+export function Panel({...props}: PanelProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel")
+
+    return (
+        <BaseElement kind={"section"} {...props}/>
+    )
+}
diff --git a/src/components/panels/Parenthesis.stories.jsx b/src/components/panels/Parenthesis.stories.jsx
new file mode 100644
index 0000000..3daa7c8
--- /dev/null
+++ b/src/components/panels/Parenthesis.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Parenthesis } from "./Parenthesis"
+
+
+export default {
+    component: Parenthesis,
+    title: "Panels/Parenthesis",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Parenthesis {...props}>
+        This is a Parenthesis.
+    </Parenthesis>
+)
+Default.args = {}
diff --git a/src/components/panels/Parenthesis.tsx b/src/components/panels/Parenthesis.tsx
new file mode 100644
index 0000000..5f716e2
--- /dev/null
+++ b/src/components/panels/Parenthesis.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface ParenthesisProps {
+    [props: string]: any,
+}
+
+
+export function Parenthesis({...props}: ParenthesisProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/utils/Decorators.jsx b/src/utils/Decorators.jsx
index 0753585..21d7cd1 100644
--- a/src/utils/Decorators.jsx
+++ b/src/utils/Decorators.jsx
@@ -1,6 +1,6 @@
 import { Bluelib as BluelibComponent } from "../components/Bluelib"
 
 
-export const Bluelib = Story => <BluelibComponent theme={"paper"}><Story/></BluelibComponent>
+export const Bluelib = Story => <BluelibComponent theme={"paper"} style={{backgroundColor: "transparent"}}><Story/></BluelibComponent>
 
 export const Fill = Story => <div style={{height: "100vh"}}><Story/></div>