shadcn 入门
shadcn/ui 是一个基于 Radix 和 TailwindCSS 的开源 React 组件集合。
npm install @blocknote/core @blocknote/react @blocknote/shadcnpnpm add @blocknote/core @blocknote/react @blocknote/shadcnbun add @blocknote/core @blocknote/react @blocknote/shadcn要在 shadcn 中使用 BlockNote，可以从 @blocknote/shadcn 中导入 BlockNoteView，并从 @blocknote/shadcn/style.css 导入样式表。此版本的 BlockNoteView 预期用于已经使用 shadcn/TailwindCSS 的应用中，因此它本身不导入任何这些样式。
为了确保 Tailwind 为 BlockNote 组件使用的所有工具类生成必要的 CSS，请确保在导入 Tailwind 的样式表中添加 @source 指令：
@import "tailwindcss";
...
/* 指向你安装的 `@blocknote/shadcn` 包的路径。 */
@source "../node_modules/@blocknote/shadcn";仅使用 TailwindCSS 的用法
如果你的应用不使用 shadcn 组件，仅使用 TailwindCSS，只需扩展 Tailwind 主题以包含 shadcn 工具类即可让一切正常工作。你可以将以下样式复制到导入 Tailwind 的样式表中。
@import "tailwindcss";
...
/* 指向你安装的 `@blocknote/shadcn` 包的路径。 */
@source "../node_modules/@blocknote/shadcn";
...
@custom-variant dark (&:is(.dark *));
/* 浅色主题 shadcn CSS 变量。 */
: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);
}
/* 深色主题 shadcn CSS 变量。 */
.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);
}
/* 使用 shadcn 工具类扩展 Tailwind 主题。 */
@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;
}
}以上使用的值是中性 shadcn 颜色主题（如上示例所用），你可以根据需要自行定制。
本网站使用了与上述完全相同的配置，你可以在 此文件 中看到。
shadcn 自定义
BlockNote 附带默认的 shadcn 组件。但是，通常你已经在项目中复制并可能自定义了自己的 shadcn 组件。
要让 BlockNote 使用你项目中的 shadcn 组件而非默认组件，可以通过 BlockNoteView 的 shadcnComponents 属性传递它们：
import * as Button from "@/components/ui/button"
import * as Select from "@/components/ui/select"
return (
<BlockNoteView editor={editor} shadcnComponents={{
Select,
Button,
...
}} />
);你可以传递以下 shadcn 模块中的组件：
- Badge
- Button
- Card
- DropdownMenu
- Form
- Input
- Label
- Popover
- Select
- Tabs
- Toggle
- Tooltip
为确保兼容性，你的 shadcn 组件不应使用 Portals （请注释掉
DropdownMenu、Popover 和 Select 组件中的相关代码）。