diff --git a/src/bluelib b/src/bluelib
index ee3213e..5878b6d 160000
--- a/src/bluelib
+++ b/src/bluelib
@@ -1 +1 @@
-Subproject commit ee3213e7c3853777af7052295b4d425746860ba5
+Subproject commit 5878b6d9b3fa5e2578aadde8afad309211f0b224
diff --git a/src/components/common/Content.tsx b/src/components/common/Content.tsx
new file mode 100644
index 0000000..df421d5
--- /dev/null
+++ b/src/components/common/Content.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+
+
+interface ContentProps {
+
+}
+
+
+export function Content({}: ContentProps): JSX.Element {
+    return (
+        <>
+        </>
+    )
+}
diff --git a/src/components/common/Details.stories.jsx b/src/components/common/Details.stories.jsx
new file mode 100644
index 0000000..544227a
--- /dev/null
+++ b/src/components/common/Details.stories.jsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Details as DetailsComponent } from "./Details"
+import { DetailsSummary } from "./DetailsSummary"
+
+
+export default {
+    component: DetailsComponent,
+    title: "Common/Details",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Details = props => (
+    <DetailsComponent {...props}>
+        <DetailsComponent.Summary>
+            The Tragedy
+        </DetailsComponent.Summary>
+        <DetailsComponent.Content>
+            Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’s not a story the Jedi would tell you. It’s a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life… He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic. He could save others from death, but not himself.
+        </DetailsComponent.Content>
+    </DetailsComponent>
+)
+Details.args = {}
\ No newline at end of file
diff --git a/src/components/common/Details.tsx b/src/components/common/Details.tsx
new file mode 100644
index 0000000..07f6552
--- /dev/null
+++ b/src/components/common/Details.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+import {DetailsSummary} from "./DetailsSummary";
+import {DetailsContent} from "./DetailsContent";
+
+
+export interface DetailsProps extends Types.BluelibHTMLProps<HTMLDetailsElement> {}
+
+
+export function Details({children, disabled, onClick, ...props}: DetailsProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details")
+
+    const onClickWrapper =
+        React.useCallback(
+            event => {
+                if(disabled) {
+                    event.preventDefault()
+                }
+                else if(onClick) {
+                    onClick(event)
+                }
+            },
+            [disabled, onClick]
+        )
+
+    return (
+        <BaseElement kind={"details"} onClick={onClickWrapper} disabled={disabled} {...props}>
+            {children}
+        </BaseElement>
+    )
+}
+
+Details.Summary = DetailsSummary
+Details.Content = DetailsContent
diff --git a/src/components/common/DetailsContent.tsx b/src/components/common/DetailsContent.tsx
new file mode 100644
index 0000000..9c94c7e
--- /dev/null
+++ b/src/components/common/DetailsContent.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types";
+import {BaseElement} from "../BaseElement";
+import {DetailsProps} from "./Details";
+import mergeClassNames from "classnames"
+
+
+export interface DetailsContentProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function DetailsContent({...props}: DetailsContentProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details-content")
+
+    return (
+        <BaseElement kind={"div"} {...props}/>
+    )
+}
diff --git a/src/components/common/DetailsSummary.tsx b/src/components/common/DetailsSummary.tsx
new file mode 100644
index 0000000..c1f0b51
--- /dev/null
+++ b/src/components/common/DetailsSummary.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types";
+import {BaseElement} from "../BaseElement";
+import {DetailsProps} from "./Details";
+import mergeClassNames from "classnames"
+
+
+export interface DetailsSummaryProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function DetailsSummary({...props}: DetailsSummaryProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "details-summary")
+
+    return (
+        <BaseElement kind={"summary"} {...props}/>
+    )
+}