diff --git a/src/components/panels/Box.stories.jsx b/src/components/panels/Box.stories.jsx
index 369d52a..0b463cc 100644
--- a/src/components/panels/Box.stories.jsx
+++ b/src/components/panels/Box.stories.jsx
@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}
diff --git a/src/components/panels/Box.tsx b/src/components/panels/Box.tsx
index c5ffb32..dd11b1c 100644
--- a/src/components/panels/Box.tsx
+++ b/src/components/panels/Box.tsx
@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface BoxProps extends PanelProps {}
 
 
-export function Box({...props}: BoxProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box")
+export function Box({todo, ...props}: BoxProps): JSX.Element {
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>
diff --git a/src/components/panels/Dialog.stories.jsx b/src/components/panels/Dialog.stories.jsx
index 41d6d7c..1f680a1 100644
--- a/src/components/panels/Dialog.stories.jsx
+++ b/src/components/panels/Dialog.stories.jsx
@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}
diff --git a/src/components/panels/Dialog.tsx b/src/components/panels/Dialog.tsx
index 4cdd748..e8a279b 100644
--- a/src/components/panels/Dialog.tsx
+++ b/src/components/panels/Dialog.tsx
@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface DialogProps extends PanelProps {}
 
 
-export function Dialog({...props}: DialogProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog")
+export function Dialog({todo, ...props}: DialogProps): JSX.Element {
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>
diff --git a/src/components/panels/Panel.stories.jsx b/src/components/panels/Panel.stories.jsx
index ce3e7bf..374435a 100644
--- a/src/components/panels/Panel.stories.jsx
+++ b/src/components/panels/Panel.stories.jsx
@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}
diff --git a/src/components/panels/Panel.tsx b/src/components/panels/Panel.tsx
index f4d140b..1e026db 100644
--- a/src/components/panels/Panel.tsx
+++ b/src/components/panels/Panel.tsx
@@ -5,11 +5,17 @@ import {BaseElement} from "../BaseElement"
 import mergeClassNames from "classnames"
 
 
-export interface PanelProps extends Types.BluelibHTMLProps<HTMLElement> {}
+export interface PanelProps extends Types.BluelibHTMLProps<HTMLElement> {
+    todo?: boolean,
+}
 
 
-export function Panel({...props}: PanelProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel")
+export function Panel({todo, ...props}: PanelProps): JSX.Element {
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel", todo ? "todo" : "")
 
     return (
         <BaseElement kind={"section"} {...props}/>
diff --git a/src/components/panels/Parenthesis.stories.jsx b/src/components/panels/Parenthesis.stories.jsx
index adbaca0..fce287b 100644
--- a/src/components/panels/Parenthesis.stories.jsx
+++ b/src/components/panels/Parenthesis.stories.jsx
@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}
diff --git a/src/components/panels/Parenthesis.tsx b/src/components/panels/Parenthesis.tsx
index ba4882c..3185062 100644
--- a/src/components/panels/Parenthesis.tsx
+++ b/src/components/panels/Parenthesis.tsx
@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface ParenthesisProps extends PanelProps {}
 
 
-export function Parenthesis({...props}: ParenthesisProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis")
+export function Parenthesis({todo, ...props}: ParenthesisProps): JSX.Element {
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>