diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index f7a422b..4f24ff1 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,6 +6,7 @@
     "EditorConfig.EditorConfig",
     "esbenp.prettier-vscode",
     "GitHub.vscode-github-actions",
+    "unifiedjs.vscode-mdx",
     "webben.browserslist"
   ]
 }
diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
new file mode 100644
index 0000000..6634242
--- /dev/null
+++ b/src/docs/sample.mdx
@@ -0,0 +1,10 @@
+import { Alert } from "../components/Alert";
+import { PrimaryButton } from "../components/PrimaryButton";
+
+<div className="space-y-4 text-base text-ui-neutral-5">
+  <Alert sentiment="danger">This is an alert.</Alert>
+  <Alert sentiment="warning">This is an alert.</Alert>
+  <Alert>This is an alert.</Alert>
+  <div>This is just a block of text.</div>
+  <PrimaryButton>Button</PrimaryButton>
+</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index efc0fa5..dcd1921 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 import tailwindPreset from "./src/tailwind-preset";
 
 export default {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
   presets: [tailwindPreset],
   darkMode: ["class", ".theme-dark"],
 } satisfies Config;