TypeCellOS · matthewlipski · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025
diff --git a/docs/components/Example.tsx b/docs/components/Example.tsx
@@ -42,11 +42,13 @@ function ExampleDemoBar(props: { exampleData: ExampleData }) {
         icon={<AiFillGithub size={16} />}
         url={`https://github.com/TypeCellOS/BlockNote/tree/main/${props.exampleData.pathFromRoot}`}
       />
-      <ExampleDemoBarSourceCodeLink
-        name="StackBlitz"
-        icon={<SiStackblitz size={16} />}
-        url={`https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/${props.exampleData.pathFromRoot}`}
-      />
+      {props.exampleData.showStackBlitzLink && (
+        <ExampleDemoBarSourceCodeLink
+          name="StackBlitz"
+          icon={<SiStackblitz size={16} />}
+          url={`https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/${props.exampleData.pathFromRoot}`}
+        />
+      )}
     </div>
   );
 }

diff --git a/docs/content/docs/getting-started/shadcn.mdx b/docs/content/docs/getting-started/shadcn.mdx
@@ -31,14 +31,6 @@ To ensure Tailwind generates the necessary CSS for all utility classes used by B
 @source "../node_modules/@blocknote/shadcn";
 ```
 
-{/* TODO: Figure out why `@source` directive isn't working in StackBlitz sandbox. */}
-{/* https://stackblitz.com/edit/github-xdutga97?file=src%2FApp.tsx */}
-
-<Callout type={"warning"}>
-  Because the ShadCN version of BlockNote requires being in a Tailwind app,
-  viewing the demo below on StackBlitz will have missing styles.
-</Callout>
-
 <Example name="basic/shadcn" />
 
 ## Usage with Tailwind Only

diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-minimal",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/02-block-objects/package.json b/examples/01-basic/02-block-objects/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-block-objects",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/03-multi-column/package.json b/examples/01-basic/03-multi-column/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-multi-column",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/04-default-blocks/package.json b/examples/01-basic/04-default-blocks/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-default-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/05-removing-default-blocks/package.json b/examples/01-basic/05-removing-default-blocks/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-removing-default-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/06-block-manipulation/package.json b/examples/01-basic/06-block-manipulation/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-block-manipulation",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/07-selection-blocks/package.json b/examples/01-basic/07-selection-blocks/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-selection-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/08-ariakit/package.json b/examples/01-basic/08-ariakit/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-ariakit",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/09-shadcn/.bnexample.json b/examples/01-basic/09-shadcn/.bnexample.json
@@ -2,5 +2,7 @@
   "playground": true,
   "docs": true,
   "author": "matthewlipski",
-  "tags": ["Basic"]
+  "tags": ["Basic"],
+  "tailwind": true,
+  "stackBlitz": false
 }
diff --git a/examples/01-basic/09-shadcn/README.md b/examples/01-basic/09-shadcn/README.md
@@ -2,11 +2,6 @@
 
 This example shows how you can use BlockNote with ShadCN (instead of Mantine).
 
-<Callout type={"warning"}>
-Because the ShadCN version of BlockNote requires being in a Tailwind app,
-viewing the demo below on StackBlitz will have missing styles.
-</Callout>
-
 **Relevant Docs:**
 
 - [Getting Started with ShadCN](/docs/getting-started/shadcn)
diff --git a/examples/01-basic/09-shadcn/main.tsx b/examples/01-basic/09-shadcn/main.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./src/App.jsx";
+import "./tailwind.css";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/09-shadcn/package.json b/examples/01-basic/09-shadcn/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-shadcn",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {
@@ -16,9 +17,12 @@
     "@blocknote/mantine": "latest",
     "@blocknote/shadcn": "latest",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.12",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.3.1",

diff --git a/examples/01-basic/09-shadcn/tailwind.css b/examples/01-basic/09-shadcn/tailwind.css
@@ -0,0 +1,121 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Code below needed for ShadCN examples, check docs for more info. */
+@source "./node_modules/@blocknote/shadcn";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  .bn-shadcn * {
+    @apply border-border outline-ring/50;
+  }
+}
diff --git a/examples/01-basic/09-shadcn/vite.config.ts b/examples/01-basic/09-shadcn/vite.config.ts
@@ -3,10 +3,11 @@ import react from "@vitejs/plugin-react";
 import * as fs from "fs";
 import * as path from "path";
 import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
 // import eslintPlugin from "vite-plugin-eslint";
 // https://vitejs.dev/config/
 export default defineConfig((conf) => ({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   optimizeDeps: {},
   build: {
     sourcemap: true,

diff --git a/examples/01-basic/10-localization/package.json b/examples/01-basic/10-localization/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-localization",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/11-custom-placeholder/package.json b/examples/01-basic/11-custom-placeholder/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-custom-placeholder",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/12-multi-editor/package.json b/examples/01-basic/12-multi-editor/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-multi-editor",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/13-custom-paste-handler/package.json b/examples/01-basic/13-custom-paste-handler/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-custom-paste-handler",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/01-basic/testing/package.json b/examples/01-basic/testing/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-basic-testing",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/02-backend/01-file-uploading/package.json b/examples/02-backend/01-file-uploading/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-backend-file-uploading",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/02-backend/02-saving-loading/package.json b/examples/02-backend/02-saving-loading/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-backend-saving-loading",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/02-backend/03-s3/package.json b/examples/02-backend/03-s3/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-backend-s3",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/02-backend/04-rendering-static-documents/package.json b/examples/02-backend/04-rendering-static-documents/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-backend-rendering-static-documents",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/03-ui-components/01-ui-elements-remove/package.json b/examples/03-ui-components/01-ui-elements-remove/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-ui-components-ui-elements-remove",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/package.json b/examples/03-ui-components/02-formatting-toolbar-buttons/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-ui-components-formatting-toolbar-buttons",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-ui-components-formatting-toolbar-block-type-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/03-ui-components/04-side-menu-buttons/package.json b/examples/03-ui-components/04-side-menu-buttons/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-ui-components-side-menu-buttons",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {

diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/package.json b/examples/03-ui-components/05-side-menu-drag-handle-items/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@blocknote/example-ui-components-side-menu-drag-handle-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
   "private": true,
   "version": "0.12.4",
   "scripts": {