(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4522],{6786:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/advanced/shadcn",function(){return n(8028)}])},95931:function(e,t,n){"use strict";n.d(t,{e:function(){return s}});var o=n(24246),i=n(34473),a=n(15886);function s(e){let t=(0,i.kP)(),n=a.$[e.name];if(!n)throw Error("Example ".concat(e.name," not found"));let s=n.ExampleWithCode,l=function(e){var t,n;if("authenticated"!==e.status)return;let o=null==e?void 0:null===(n=e.data)||void 0===n?void 0:null===(t=n.user)||void 0===t?void 0:t.sponsorInfo;return(null==o?void 0:o.isActive)?o.tier.monthlyPriceInDollars>100?"business":"starter":"free"}(t);return(0,o.jsx)(s,{name:e.name,isProExample:n.pro?{userStatus:l}:void 0})}},8028:function(e,t,n){"use strict";n.r(t),n.d(t,{__toc:function(){return c}});var o=n(24246),i=n(29304),a=n(33756),s=n(7854);n(37090);var l=n(31441),r=n(95931),d=n(36391);let c=[{depth:2,value:"Using ShadCN, Radix and Tailwind with BlockNote",id:"using-shadcn-radix-and-tailwind-with-blocknote"},{depth:2,value:"ShadCN Customization",id:"shadcn-customization"}];function m(e){let t=Object.assign({h2:"h2",p:"p",a:"a",code:"code",pre:"pre",span:"span",ul:"ul",li:"li"},(0,l.a)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"using-shadcn-radix-and-tailwind-with-blocknote",children:"Using ShadCN, Radix and Tailwind with BlockNote"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://ui.shadcn.com/",children:"shadcn/ui"})," is an open-source collection of React components based on ",(0,o.jsx)(t.a,{href:"https://radix-ui.com/",children:"Radix"})," and Tailwind. To use BlockNote with shadcn, you can import ",(0,o.jsx)(t.code,{children:"BlockNoteView"})," from ",(0,o.jsx)(t.code,{children:"@blocknote/shadcn"})," (instead of from ",(0,o.jsx)(t.code,{children:"@blocknote/mantine"}),") and the stylesheet from ",(0,o.jsx)(t.code,{children:"@blocknote/shadcn/style.css"}),"."]}),"\n",(0,o.jsx)(r.e,{name:"basic/shadcn"}),"\n",(0,o.jsx)(t.h2,{id:"shadcn-customization",children:"ShadCN Customization"}),"\n",(0,o.jsxs)(t.p,{children:["BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project.\nTo make BlockNote use the ShadCN components from your project instead of the default ones, you can pass them using the ",(0,o.jsx)(t.code,{children:"shadCNComponents"})," prop of ",(0,o.jsx)(t.code,{children:"BlockNoteView"}),":"]}),"\n",(0,o.jsx)(t.pre,{"data-language":"tsx","data-theme":"default",hasCopyCode:!0,children:(0,o.jsxs)(t.code,{"data-language":"tsx","data-theme":"default",children:[(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"*"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" Button "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@/components/ui/button"'})]}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"*"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" Select "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@/components/ui/select"'})]}),"\n",(0,o.jsx)(t.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"BlockNoteView"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"editor"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{editor} "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"shadCNComponents"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    Select"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    Button"}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(t.span,{className:"line",children:[(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."})]}),"\n",(0,o.jsx)(t.span,{className:"line",children:(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  }} />"})}),"\n",(0,o.jsx)(t.span,{className:"line",children:(0,o.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:");"})})]})}),"\n",(0,o.jsx)(t.p,{children:"You can pass components from the following ShadCN modules:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Badge"}),"\n",(0,o.jsx)(t.li,{children:"Button"}),"\n",(0,o.jsx)(t.li,{children:"Card"}),"\n",(0,o.jsx)(t.li,{children:"DropdownMenu"}),"\n",(0,o.jsx)(t.li,{children:"Form"}),"\n",(0,o.jsx)(t.li,{children:"Input"}),"\n",(0,o.jsx)(t.li,{children:"Label"}),"\n",(0,o.jsx)(t.li,{children:"Popover"}),"\n",(0,o.jsx)(t.li,{children:"Select"}),"\n",(0,o.jsx)(t.li,{children:"Tabs"}),"\n",(0,o.jsx)(t.li,{children:"Toggle"}),"\n",(0,o.jsx)(t.li,{children:"Tooltip"}),"\n"]}),"\n",(0,o.jsx)(d.UW,{type:"warning",emoji:"⚠️",children:(0,o.jsx)(t.p,{children:"To ensure compatibility, your ShadCN components should not use Portals\n(comment these out from your DropdownMenu, Popover and Select components)."})})]})}let u={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.a)(),e.components);return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)},pageOpts:{filePath:"pages/docs/advanced/shadcn.mdx",route:"/docs/advanced/shadcn",frontMatter:{title:"BlockNote with ShadCN and Tailwind",description:"ShadCN + Tailwind rich text editor using BlockNote",imageTitle:"BlockNote with ShadCN and Tailwind"},timestamp:1726879568e3,pageMap:[{kind:"Meta",data:{"*":{type:"page"},index:{type:"page",display:"hidden",theme:{layout:"raw",sidebar:!1,toc:!0},title:"Index"},docs:{title:"Docs",display:"children"},examples:{title:"Examples",display:"children"},pricing:{type:"page",theme:{layout:"raw",sidebar:!0,toc:!0},title:"Pricing"},about:"About"}},{kind:"MdxPage",name:"about",route:"/about"},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction",quickstart:"Quickstart","editor-basics":"Editor Basics","editor-api":"Editor API","styling-theming":"Styling & Theming","ui-components":"UI Components","custom-schemas":"Custom Schemas",advanced:"Advanced","discord-link":{title:"Community ↗",href:"https://discord.gg/Qc2QTTH5dF",newWindow:!0}}},{kind:"Folder",name:"advanced",route:"/docs/advanced",children:[{kind:"MdxPage",name:"ariakit",route:"/docs/advanced/ariakit",frontMatter:{title:"BlockNote with Ariakit",description:"Ariakit rich text editor with BlockNote",imageTitle:"BlockNote with Ariakit"}},{kind:"MdxPage",name:"grid-suggestion-menus",route:"/docs/advanced/grid-suggestion-menus",frontMatter:{title:"Grid Suggestion Menus",description:"In addition to displaying Suggestion Menus as stacks, BlockNote also supports displaying them as grids.",imageTitle:"Grid Suggestion Menus"}},{kind:"MdxPage",name:"nextjs",route:"/docs/advanced/nextjs",frontMatter:{title:"Next.js and BlockNote",description:"Details on integrating BlockNote with Next.js",imageTitle:"Next.js and BlockNote"}},{kind:"MdxPage",name:"real-time-collaboration",route:"/docs/advanced/real-time-collaboration",frontMatter:{title:"Real-time Collaborative rich text editor",description:"Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs)",imageTitle:"Real-time Collaboration"}},{kind:"MdxPage",name:"shadcn",route:"/docs/advanced/shadcn",frontMatter:{title:"BlockNote with ShadCN and Tailwind",description:"ShadCN + Tailwind rich text editor using BlockNote",imageTitle:"BlockNote with ShadCN and Tailwind"}},{kind:"MdxPage",name:"vanilla-js",route:"/docs/advanced/vanilla-js",frontMatter:{title:"Usage Without React (Vanilla JS)",description:"BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps.",imageTitle:"Usage Without React (Vanilla JS)"}},{kind:"Meta",data:{ariakit:"BlockNote with Ariakit",shadcn:"BlockNote with ShadCN and Tailwind","grid-suggestion-menus":"Grid Suggestion Menus",nextjs:"Next.js and BlockNote","real-time-collaboration":"Real-time Collaborative rich text editor","vanilla-js":"Usage Without React (Vanilla JS)"}}]},{kind:"Folder",name:"custom-schemas",route:"/docs/custom-schemas",children:[{kind:"MdxPage",name:"custom-blocks",route:"/docs/custom-schemas/custom-blocks"},{kind:"MdxPage",name:"custom-inline-content",route:"/docs/custom-schemas/custom-inline-content"},{kind:"MdxPage",name:"custom-styles",route:"/docs/custom-schemas/custom-styles"},{kind:"Meta",data:{"custom-blocks":"Custom Blocks","custom-inline-content":"Custom Inline Content","custom-styles":"Custom Styles"}}]},{kind:"MdxPage",name:"custom-schemas",route:"/docs/custom-schemas",frontMatter:{title:"Custom Schemas",description:"Learn how to create custom schemas for your BlockNote editor"}},{kind:"Folder",name:"editor-api",route:"/docs/editor-api",children:[{kind:"Meta",data:{"manipulating-blocks":"Manipulating Blocks","manipulating-inline-content":"Manipulating Inline Content","cursor-selections":"Cursor & Selections","converting-blocks":"Markdown & HTML","server-processing":"Server-side processing"}},{kind:"MdxPage",name:"converting-blocks",route:"/docs/editor-api/converting-blocks",frontMatter:{title:"Markdown & HTML",description:"It's possible to export or import Blocks to and from Markdown and HTML.",imageTitle:"Markdown & HTML",path:"/docs/converting-blocks"}},{kind:"MdxPage",name:"cursor-selections",route:"/docs/editor-api/cursor-selections",frontMatter:{title:"Cursor & Selections",description:"If you want to know which block(s) the user is currently editing, you can do so using cursor positions and selections.",imageTitle:"Cursor & Selections",path:"/docs/cursor-selections"}},{kind:"MdxPage",name:"manipulating-blocks",route:"/docs/editor-api/manipulating-blocks",frontMatter:{title:"Manipulating Blocks",description:"How to read Blocks from the editor, and how to create / remove / update Blocks.",imageTitle:"Manipulating Blocks",path:"/docs/manipulating-blocks"}},{kind:"MdxPage",name:"manipulating-inline-content",route:"/docs/editor-api/manipulating-inline-content",frontMatter:{title:"Manipulating Inline Content",imageTitle:"Manipulating Inline Content",path:"/docs/block-content"}},{kind:"MdxPage",name:"server-processing",route:"/docs/editor-api/server-processing",frontMatter:{title:"Server-side processing",description:"Use `ServerBlockNoteEditor` to process Blocks on the server.",imageTitle:"Server-side processing",path:"/docs/server-side-processing"}}]},{kind:"MdxPage",name:"editor-api",route:"/docs/editor-api"},{kind:"Folder",name:"editor-basics",route:"/docs/editor-basics",children:[{kind:"Meta",data:{setup:"Editor Setup","document-structure":"Document Structure","default-schema":"Default Schema"}},{kind:"MdxPage",name:"default-schema",route:"/docs/editor-basics/default-schema",frontMatter:{title:"Default Content Types",description:"BlockNote supports a variety on built-in block and inline content types that are included in the editor by default.",imageTitle:"Default Content Types"}},{kind:"MdxPage",name:"document-structure",route:"/docs/editor-basics/document-structure",frontMatter:{description:"Learn how documents (the content of the rich text editor) are structured to make the most out of BlockNote."}},{kind:"MdxPage",name:"setup",route:"/docs/editor-basics/setup",frontMatter:{description:"Learn how to setup your BlockNote editor using the `useCreateBlockNote` hook and the ``BlockNoteView` component."}}]},{kind:"MdxPage",name:"editor-basics",route:"/docs/editor-basics"},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Introduction to BlockNote",imageTitle:"Introduction to BlockNote",path:"/docs/introduction"}},{kind:"MdxPage",name:"quickstart",route:"/docs/quickstart",frontMatter:{title:"Quickstart",description:"Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app!",imageTitle:"Quickstart",path:"/docs/quickstart"}},{kind:"Folder",name:"styling-theming",route:"/docs/styling-theming",children:[{kind:"Meta",data:{themes:"Themes","overriding-css":"Overriding CSS","adding-dom-attributes":"Adding DOM Attributes"}},{kind:"MdxPage",name:"adding-dom-attributes",route:"/docs/styling-theming/adding-dom-attributes",frontMatter:{title:"Adding DOM Attributes",description:"BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.",imageTitle:"Styling & Theming",path:"/docs/theming"}},{kind:"MdxPage",name:"overriding-css",route:"/docs/styling-theming/overriding-css",frontMatter:{title:"Overriding CSS",description:"You can change any styles applied to the editor by setting your own CSS styles.",imageTitle:"Overriding CSS",path:"/docs/styling-theming/overriding-css"}},{kind:"MdxPage",name:"themes",route:"/docs/styling-theming/themes",frontMatter:{title:"Themes",description:"Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.",imageTitle:"Themes",path:"/docs/styling-theming/theming"}}]},{kind:"MdxPage",name:"styling-theming",route:"/docs/styling-theming",frontMatter:{title:"Styling & Theming",description:"You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.",imageTitle:"Styling & Theming",path:"/docs/styling-theming"}},{kind:"Folder",name:"ui-components",route:"/docs/ui-components",children:[{kind:"Meta",data:{"side-menu":"Block Side Menu","formatting-toolbar":"Formatting Toolbar","hyperlink-toolbar":{title:"Link Toolbar",display:"hidden"},"image-toolbar":{title:"Image Toolbar",display:"hidden"},"suggestion-menus":"Suggestion Menus"}},{kind:"MdxPage",name:"formatting-toolbar",route:"/docs/ui-components/formatting-toolbar",frontMatter:{title:"Formatting Toolbar",description:"The Formatting Toolbar appears whenever you highlight text in the editor.",imageTitle:"Formatting Toolbar",path:"/docs/formatting-toolbar"}},{kind:"MdxPage",name:"hyperlink-toolbar",route:"/docs/ui-components/hyperlink-toolbar",frontMatter:{title:"Link Toolbar",description:"The Link Toolbar appears whenever you hover a link in the editor.",imageTitle:"Link Toolbar",path:"/docs/link-toolbar"}},{kind:"MdxPage",name:"image-toolbar",route:"/docs/ui-components/image-toolbar",frontMatter:{title:"Image Toolbar",description:'The Image Toolbar appears whenever you select an image that doesn\'t have a URL, or when you click the "Replace Image" button in the Formatting Toolbar when an image is selected.',imageTitle:"Image Toolbar",path:"/docs/image-toolbar"}},{kind:"MdxPage",name:"side-menu",route:"/docs/ui-components/side-menu",frontMatter:{title:"Block Side Menu",description:"The Block Side Menu appears on the left side whenever you hover a block.",imageTitle:"Block Side Menu",path:"/docs/side-menu"}},{kind:"MdxPage",name:"suggestion-menus",route:"/docs/ui-components/suggestion-menus",frontMatter:{title:"Suggestion Menus",description:"Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.",imageTitle:"Suggestion Menus",path:"/docs/slash-menu"}}]},{kind:"MdxPage",name:"ui-components",route:"/docs/ui-components",frontMatter:{title:"UI Components",description:"BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized.",imageTitle:"UI Components",path:"/docs/ui-components"}}]},{kind:"Folder",name:"examples",route:"/examples",children:[{kind:"Meta",data:{index:"Overview",basic:"Basic",backend:"Backend","ui-components":"UI Components",theming:"Theming",interoperability:"Interoperability","custom-schema":"Custom Schemas",collaboration:"Collaboration",extensions:"Extensions"}},{kind:"Folder",name:"backend",route:"/examples/backend",children:[{kind:"Meta",data:{"file-uploading":{title:"Upload Files"},"saving-loading":{title:"Saving & Loading"},s3:{title:"Upload Files to AWS S3"},"rendering-static-documents":{title:"Rendering static documents"}}},{kind:"MdxPage",name:"file-uploading",route:"/examples/backend/file-uploading"},{kind:"MdxPage",name:"rendering-static-documents",route:"/examples/backend/rendering-static-documents"},{kind:"MdxPage",name:"s3",route:"/examples/backend/s3"},{kind:"MdxPage",name:"saving-loading",route:"/examples/backend/saving-loading"}]},{kind:"Folder",name:"basic",route:"/examples/basic",children:[{kind:"Meta",data:{minimal:{title:"Basic Setup"},"block-objects":{title:"Displaying Document JSON"},"all-blocks":{title:"Default Schema Showcase"},"removing-default-blocks":{title:"Removing Default Blocks from Schema"},"block-manipulation":{title:"Manipulating Blocks"},"selection-blocks":{title:"Displaying Selected Blocks"},ariakit:{title:"Use with Ariakit"},shadcn:{title:"Use with ShadCN"},localization:{title:"Localization (i18n)"}}},{kind:"MdxPage",name:"all-blocks",route:"/examples/basic/all-blocks"},{kind:"MdxPage",name:"ariakit",route:"/examples/basic/ariakit"},{kind:"MdxPage",name:"block-manipulation",route:"/examples/basic/block-manipulation"},{kind:"MdxPage",name:"block-objects",route:"/examples/basic/block-objects"},{kind:"MdxPage",name:"localization",route:"/examples/basic/localization"},{kind:"MdxPage",name:"minimal",route:"/examples/basic/minimal"},{kind:"MdxPage",name:"removing-default-blocks",route:"/examples/basic/removing-default-blocks"},{kind:"MdxPage",name:"selection-blocks",route:"/examples/basic/selection-blocks"},{kind:"MdxPage",name:"shadcn",route:"/examples/basic/shadcn"}]},{kind:"Folder",name:"collaboration",route:"/examples/collaboration",children:[{kind:"Meta",data:{partykit:{title:"Collaborative Editing with PartyKit"},liveblocks:{title:"Collaborative Editing with Liveblocks"}}},{kind:"MdxPage",name:"liveblocks",route:"/examples/collaboration/liveblocks"},{kind:"MdxPage",name:"partykit",route:"/examples/collaboration/partykit"}]},{kind:"Folder",name:"custom-schema",route:"/examples/custom-schema",children:[{kind:"Meta",data:{"alert-block":{title:"Alert Block"},"suggestion-menus-mentions":{title:"Mentions Menu"},"font-style":{title:"Font Style"},"pdf-file-block":{title:"PDF Block"}}},{kind:"MdxPage",name:"alert-block",route:"/examples/custom-schema/alert-block"},{kind:"MdxPage",name:"font-style",route:"/examples/custom-schema/font-style"},{kind:"MdxPage",name:"pdf-file-block",route:"/examples/custom-schema/pdf-file-block"},{kind:"MdxPage",name:"suggestion-menus-mentions",route:"/examples/custom-schema/suggestion-menus-mentions"}]},{kind:"Folder",name:"extensions",route:"/examples/extensions",children:[{kind:"Meta",data:{"tiptap-arrow-conversion":{title:"TipTap extension (arrow InputRule)"}}},{kind:"MdxPage",name:"tiptap-arrow-conversion",route:"/examples/extensions/tiptap-arrow-conversion"}]},{kind:"MdxPage",name:"index",route:"/examples"},{kind:"Folder",name:"interoperability",route:"/examples/interoperability",children:[{kind:"Meta",data:{"converting-blocks-to-html":{title:"Converting Blocks to HTML"},"converting-blocks-from-html":{title:"Parsing HTML to Blocks"},"converting-blocks-to-md":{title:"Converting Blocks to Markdown"},"converting-blocks-from-md":{title:"Parsing Markdown to Blocks"}}},{kind:"MdxPage",name:"converting-blocks-from-html",route:"/examples/interoperability/converting-blocks-from-html"},{kind:"MdxPage",name:"converting-blocks-from-md",route:"/examples/interoperability/converting-blocks-from-md"},{kind:"MdxPage",name:"converting-blocks-to-html",route:"/examples/interoperability/converting-blocks-to-html"},{kind:"MdxPage",name:"converting-blocks-to-md",route:"/examples/interoperability/converting-blocks-to-md"}]},{kind:"Folder",name:"theming",route:"/examples/theming",children:[{kind:"Meta",data:{"theming-dom-attributes":{title:"Adding CSS Class to Blocks"},"changing-font":{title:"Changing Editor Font"},"theming-css":{title:"Overriding CSS Styles"},"theming-css-variables":{title:"Overriding Theme CSS Variables"},"theming-css-variables-code":{title:"Changing Themes Through Code"}}},{kind:"MdxPage",name:"changing-font",route:"/examples/theming/changing-font"},{kind:"MdxPage",name:"theming-css-variables-code",route:"/examples/theming/theming-css-variables-code"},{kind:"MdxPage",name:"theming-css-variables",route:"/examples/theming/theming-css-variables"},{kind:"MdxPage",name:"theming-css",route:"/examples/theming/theming-css"},{kind:"MdxPage",name:"theming-dom-attributes",route:"/examples/theming/theming-dom-attributes"}]},{kind:"Folder",name:"ui-components",route:"/examples/ui-components",children:[{kind:"Meta",data:{"ui-elements-remove":{title:"Removing UI Elements"},"formatting-toolbar-buttons":{title:"Adding Formatting Toolbar Buttons"},"formatting-toolbar-block-type-items":{title:"Adding Block Type Select Items"},"side-menu-buttons":{title:"Adding Block Side Menu Buttons"},"side-menu-drag-handle-items":{title:"Adding Drag Handle Menu Items"},"suggestion-menus-slash-menu-items":{title:"Adding Slash Menu Items"},"suggestion-menus-slash-menu-component":{title:"Replacing Slash Menu Component"},"suggestion-menus-emoji-picker-columns":{title:"Changing Emoji Picker Columns"},"suggestion-menus-emoji-picker-component":{title:"Replacing Emoji Picker Component"},"suggestion-menus-grid-mentions":{title:"Grid Mentions Menu"},"uppy-file-panel":{title:"Uppy File Panel"},"static-formatting-toolbar":{title:"Static Formatting Toolbar"},"custom-ui":{title:"UI With Third-Party Components"}}},{kind:"MdxPage",name:"custom-ui",route:"/examples/ui-components/custom-ui"},{kind:"MdxPage",name:"formatting-toolbar-block-type-items",route:"/examples/ui-components/formatting-toolbar-block-type-items"},{kind:"MdxPage",name:"formatting-toolbar-buttons",route:"/examples/ui-components/formatting-toolbar-buttons"},{kind:"MdxPage",name:"side-menu-buttons",route:"/examples/ui-components/side-menu-buttons"},{kind:"MdxPage",name:"side-menu-drag-handle-items",route:"/examples/ui-components/side-menu-drag-handle-items"},{kind:"MdxPage",name:"static-formatting-toolbar",route:"/examples/ui-components/static-formatting-toolbar"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-columns",route:"/examples/ui-components/suggestion-menus-emoji-picker-columns"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-component",route:"/examples/ui-components/suggestion-menus-emoji-picker-component"},{kind:"MdxPage",name:"suggestion-menus-grid-mentions",route:"/examples/ui-components/suggestion-menus-grid-mentions"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-component",route:"/examples/ui-components/suggestion-menus-slash-menu-component"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-items",route:"/examples/ui-components/suggestion-menus-slash-menu-items"},{kind:"MdxPage",name:"ui-elements-remove",route:"/examples/ui-components/ui-elements-remove"},{kind:"MdxPage",name:"uppy-file-panel",route:"/examples/ui-components/uppy-file-panel"}]}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{overrideTitle:"BlockNote - Javascript Block-Based React rich text editor",description:"A beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling."}},{kind:"MdxPage",name:"pricing",route:"/pricing"}],flexsearch:!0,title:"BlockNote with ShadCN and Tailwind",headings:c},pageNextRoute:"/docs/advanced/shadcn",nextraLayout:a.ZP,themeConfig:s.Z};t.default=(0,i.j)(u)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=6786)}),_N_E=e.O()}]);