diff --git a/src/components/chapters/Chapter.stories.jsx b/src/components/chapters/Chapter.stories.jsx
new file mode 100644
index 0000000..efd194d
--- /dev/null
+++ b/src/components/chapters/Chapter.stories.jsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Chapter } from "./Chapter"
+import { Box } from "../panels/Box"
+
+
+export default {
+ component: Chapter,
+ title: "Chapters/Chapter",
+ decorators: [Decorators.Bluelib],
+ argTypes: {
+ customColor: {
+ control: {type: "color"},
+ },
+ },
+}
+
+
+export const Default = props => (
+
+ First
+ Second
+ Third
+
+)
+Default.args = {}
+
+
+export const AutoWrap = props => (
+
+ First
+ Second
+ Third
+ Fourth
+ Fifth
+ Sixth
+ Seventh
+ Eighth
+ Ninth
+ Tenth
+ Eleventh
+ Twelfth
+ Thirtheenth
+ Fourtheenth
+ Fiftheenth
+
+)
+AutoWrap.args = {}
+
+
+export const ForceWrap = props => (
+
+ First
+ Second
+
+ Third
+ Fourth
+
+)
+ForceWrap.args = {}
\ No newline at end of file
diff --git a/src/components/chapters/Chapter.tsx b/src/components/chapters/Chapter.tsx
new file mode 100644
index 0000000..9abba97
--- /dev/null
+++ b/src/components/chapters/Chapter.tsx
@@ -0,0 +1,33 @@
+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 ChapterProps {
+ [props: string]: any,
+}
+
+
+export function Chapter({...props}: ChapterProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "chapter")
+
+ return (
+
+ )
+}
+
+
+interface ChapterForceWrapProps {
+ [props: string]: any,
+}
+
+
+Chapter.ForceWrap = function({...props}: ChapterForceWrapProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "chapter-forcewrap")
+
+ return (
+
+ )
+}
\ No newline at end of file