diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 574b18c4..7d02d222 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -2,4 +2,4 @@
   #story-root {
     margin-bottom: 3rem;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index bc4372fb..fd711a09 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,5 +1,3 @@
-import { addons } from '@storybook/addons'
-import { themes } from '@storybook/theming'
 import React from 'react'
 
 import StoryLayout from './story-layout'
@@ -58,7 +56,20 @@ export const parameters = {
 
 export const decorators = [
   (Story, options) => (
-    <StoryLayout title={options.title} description={options.story}>
+    <StoryLayout
+      title={options.title}
+      description={options.story}
+      source={
+        options.parameters.storySource.source.
+        /* TODO: clean up all this string formatting/regex */
+        /* Removes the args arrow function */
+        replace('(args) => {', '').
+        /* Removes leftover newline from previous replace */
+        replace('\n', '').
+        /* Removes the last occurence of a closing bracket (from the lambda) */
+        replace(/}([^}]*)$/, '$1')
+      }
+    >
       <Story />
     </StoryLayout>
   ),
diff --git a/.storybook/story-layout.js b/.storybook/story-layout.js
new file mode 100644
index 00000000..7f3e8e4b
--- /dev/null
+++ b/.storybook/story-layout.js
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react'
+import Highlight, { defaultProps } from "prism-react-renderer"
+import theme from "prism-react-renderer/themes/vsDark"
+
+import { useGlobalTheme } from './theming'
+
+import Navbar from '../src/Navbar'
+import Tabs from '../src/Tabs'
+import CodeMockup from '../src/CodeMockup'
+import Theme from '../src/Theme'
+
+const StoryLayout = ({ children, title, description, source }) => {
+  const [tab, setTab] = useState('preview')
+  const globalTheme = useGlobalTheme()
+
+  useEffect(() => {
+    document.getElementsByTagName('html')[0].setAttribute('data-theme', globalTheme)
+  }, [globalTheme])
+
+  return (
+    <Theme dataTheme={globalTheme} className="w-full h-screen p-8 bg-base-100">
+      <Navbar className="p-0 border-b border-neutral text-base-content">
+        <Navbar.Start>
+          <span className="text-lg font-bold">react-daisyui</span>
+        </Navbar.Start>
+      </Navbar>
+
+      <div className="w-full h-full my-4">
+        <h1 className="text-4xl text-base-content font-bold">{title}</h1>
+        <p className="text-base-content">{description}</p>
+        <div className="my-4">
+          <div className='grid'>
+            <Tabs
+              className='z-10 -mb-px'
+              variant='lifted'
+              value={tab}
+              onChange={(t) => setTab(t)}
+            >
+              <Tabs.Tab value="preview" className="[--tab-bg:hsl(var(--b2))]">
+                Preview
+              </Tabs.Tab> 
+              <Tabs.Tab value="html" className={tab === 'html' ? "[--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}>
+                HTML
+              </Tabs.Tab> 
+              <Tabs.Tab value="html" className="mr-6 flex-1 cursor-default [--tab-border-color:transparent]" /> 
+            </Tabs>
+            <div className='rounded-b-box rounded-tr-box relative overflow-x-auto'>
+              {tab === 'preview' ? (
+                <div
+                  className="border-base-300 bg-base-200 rounded-b-box rounded-tr-box
+                            flex min-h-[6rem] min-w-[18rem] flex-wrap items-center justify-center gap-2
+                            overflow-x-hidden border bg-cover bg-top p-4"
+                  style={{
+                    backgroundSize: '5px 5px',
+                  }}
+                >
+                  {children}
+                </div>
+              ) : (
+                <CodeMockup className="w-full mb-8">
+                  <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
+                  {({ tokens, getLineProps, getTokenProps }) => (
+                    <pre slot="html">
+                      {tokens.map((line, i) => (
+                        <div {...getLineProps({ line, key: i })}>
+                          {line.map((token, key) => (
+                            <span {...getTokenProps({ token, key })} />
+                          ))}
+                        </div>
+                      ))}
+                    </pre>
+                  )}
+                  </Highlight>
+                </CodeMockup>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Theme>
+  )
+}
+
+export default StoryLayout
diff --git a/.storybook/story-layout.tsx b/.storybook/story-layout.tsx
deleted file mode 100644
index 79885b02..00000000
--- a/.storybook/story-layout.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { useGlobalTheme } from './theming'
-
-import Navbar from '../src/Navbar'
-import Theme from '../src/Theme'
-
-type Props = {
-  children: ReactNode | ReactNode[]
-  title?: any
-  description?: string
-}
-
-const StoryLayout = ({ children, title, description }: Props): JSX.Element => {
-  const globalTheme = useGlobalTheme()
-
-  return (
-    <Theme dataTheme={globalTheme} className="w-full h-screen p-8 bg-base-100">
-      <Navbar className="p-0 border-b border-neutral text-base-content">
-        <Navbar.Start>
-          <span className="text-lg font-bold">react-daisyui</span>
-        </Navbar.Start>
-      </Navbar>
-
-      <div className="w-full h-full my-4">
-        <h1 className="text-4xl text-base-content font-bold">{title}</h1>
-        <p className="text-base-content">{description}</p>
-        <div className="my-4">{children}</div>
-      </div>
-    </Theme>
-  )
-}
-
-export default StoryLayout
diff --git a/package-lock.json b/package-lock.json
index 302cd58e..aa123b48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "react-daisyui",
       "version": "1.7.6",
       "license": "MIT",
+      "dependencies": {
+        "prism-react-renderer": "^1.3.1"
+      },
       "devDependencies": {
         "@babel/core": "^7.16.0",
         "@babel/plugin-proposal-class-properties": "^7.16.0",
@@ -22532,6 +22535,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/prism-react-renderer": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz",
+      "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==",
+      "peerDependencies": {
+        "react": ">=0.14.9"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.27.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
@@ -46155,6 +46166,12 @@
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },
+    "prism-react-renderer": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz",
+      "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==",
+      "requires": {}
+    },
     "prismjs": {
       "version": "1.27.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
diff --git a/package.json b/package.json
index fe59aaee..086f7e4a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   ],
   "types": "./dist/index.d.ts",
   "scripts": {
-    "start": "start-storybook -p 6006",
+    "start": "start-storybook --no-manager-cache -p 6006",
     "dist": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx --format modern,cjs --css inline --compress false",
     "docs": "build-storybook -o ./docs -s ./public --no-manager-cache",
     "test": "jest",
@@ -82,5 +82,8 @@
     "ts-jest": "^27.1.3",
     "typescript": "^4.3.5",
     "vite": "^2.8.6"
+  },
+  "dependencies": {
+    "prism-react-renderer": "^1.3.1"
   }
 }
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 15a90873..57328ea9 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -16,9 +16,9 @@ export default {
   },
 } as Meta
 
-const Template: Story<ButtonProps> = (args) => (
-  <Button {...args} />
-)
+const Template: Story<ButtonProps> = (args) => {
+  return <Button {...args} />
+}
 export const Default = Template.bind({})
 Default.args = {
   children: 'Button'
diff --git a/src/styles.css b/src/styles.css
index b5c61c95..cdfc77d5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --base-content: theme('colors.base-content');
+    --base-100: theme('colors.base-100');
+    --base-200: theme('colors.base-200');
+    --alpha: 0.2;
+}
+
+/* FIXME: this class should add the polka-dotted background to story previews. 
+ * however it a.) doesn't take on the color of the current theme and b.) cannot add transparency to that color car.
+ */
+.preview {
+    background: radial-gradient(
+        rgba(var(--base-100), var(--alpha)), 0.5px,
+        var(--base-200) 0.5px
+    );
+    background-size: 5px 5px;
+}