You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/docs/getting-started/ariakit.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ imageTitle: BlockNote with Ariakit
6
6
7
7
# Getting Started With Ariakit
8
8
9
-
[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility. To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit`
9
+
[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility.
bun add @blocknote/core @blocknote/react @blocknote/ariakit
21
21
```
22
22
23
-
You can fully style the components with your own CSS, or import the provided default styles using the CSS file from `@blocknote/ariakit/style.css`.
23
+
To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit`. You can fully style the components with your own CSS, or import the provided default styles using the `@blocknote/ariakit/style.css` stylesheet.
Copy file name to clipboardExpand all lines: docs/content/docs/getting-started/shadcn.mdx
+143-2Lines changed: 143 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ imageTitle: ShadCN rich text editor using BlockNote
6
6
7
7
# Getting Started With ShadCN
8
8
9
-
[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and Tailwind.
9
+
[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and [TailwindCSS](https://tailwindcss.com/).
bun add @blocknote/core @blocknote/react @blocknote/shadcn
21
21
```
22
22
23
-
To use BlockNote with shadcn, you can import `BlockNoteView` from `@blocknote/shadcn` and the stylesheet from `@blocknote/shadcn/style.css`.
23
+
To use BlockNote with ShadCN, you can import `BlockNoteView` from `@blocknote/shadcn` and the stylesheet from `@blocknote/shadcn/style.css`. This version of `BlockNoteView` is expected to be used in apps that are already using ShadCN/TailwindCSS, so it does not import any of those styles itself.
24
+
25
+
To ensure Tailwind generates the necessary CSS for all utility classes used by BlockNote components, make sure to add the `@source` directive to your stylesheet that imports Tailwind:
26
+
27
+
```css
28
+
@import tailwindcss;
29
+
...
30
+
/* Path to your installed `@blocknote/shadcn` package. */
31
+
@source "../node_modules/@blocknote/shadcn";
32
+
```
24
33
25
34
<Examplename="basic/shadcn" />
26
35
36
+
## Usage with Tailwind Only
37
+
38
+
If your app doesn't use ShadCN components and only uses TailwindCSS, you just need to extend your Tailwind theme with ShadCN utility classes to get ecerything working. You can do this by simply copying the styles below into your stylesheet that imports Tailwind.
39
+
40
+
```css
41
+
@import tailwindcss;
42
+
...
43
+
@custom-variant dark (&:is(.dark *));
44
+
45
+
/* Light theme ShadCN CSS variables. */
46
+
:root {
47
+
--radius: 0.625rem;
48
+
--background: oklch(100);
49
+
--foreground: oklch(0.14500);
50
+
--card: oklch(100);
51
+
--card-foreground: oklch(0.14500);
52
+
--popover: oklch(100);
53
+
--popover-foreground: oklch(0.14500);
54
+
--primary: oklch(0.20500);
55
+
--primary-foreground: oklch(0.98500);
56
+
--secondary: oklch(0.9700);
57
+
--secondary-foreground: oklch(0.20500);
58
+
--muted: oklch(0.9700);
59
+
--muted-foreground: oklch(0.55600);
60
+
--accent: oklch(0.9700);
61
+
--accent-foreground: oklch(0.20500);
62
+
--destructive: oklch(0.5770.24527.325);
63
+
--border: oklch(0.92200);
64
+
--input: oklch(0.92200);
65
+
--ring: oklch(0.70800);
66
+
--chart-1: oklch(0.6460.22241.116);
67
+
--chart-2: oklch(0.60.118184.704);
68
+
--chart-3: oklch(0.3980.07227.392);
69
+
--chart-4: oklch(0.8280.18984.429);
70
+
--chart-5: oklch(0.7690.18870.08);
71
+
--sidebar: oklch(0.98500);
72
+
--sidebar-foreground: oklch(0.14500);
73
+
--sidebar-primary: oklch(0.20500);
74
+
--sidebar-primary-foreground: oklch(0.98500);
75
+
--sidebar-accent: oklch(0.9700);
76
+
--sidebar-accent-foreground: oklch(0.20500);
77
+
--sidebar-border: oklch(0.92200);
78
+
--sidebar-ring: oklch(0.70800);
79
+
}
80
+
81
+
/* Dark theme ShadCN CSS variables. */
82
+
.dark {
83
+
--background: oklch(0.14500);
84
+
--foreground: oklch(0.98500);
85
+
--card: oklch(0.20500);
86
+
--card-foreground: oklch(0.98500);
87
+
--popover: oklch(0.20500);
88
+
--popover-foreground: oklch(0.98500);
89
+
--primary: oklch(0.92200);
90
+
--primary-foreground: oklch(0.20500);
91
+
--secondary: oklch(0.26900);
92
+
--secondary-foreground: oklch(0.98500);
93
+
--muted: oklch(0.26900);
94
+
--muted-foreground: oklch(0.70800);
95
+
--accent: oklch(0.26900);
96
+
--accent-foreground: oklch(0.98500);
97
+
--destructive: oklch(0.7040.19122.216);
98
+
--border: oklch(100 / 10%);
99
+
--input: oklch(100 / 15%);
100
+
--ring: oklch(0.55600);
101
+
--chart-1: oklch(0.4880.243264.376);
102
+
--chart-2: oklch(0.6960.17162.48);
103
+
--chart-3: oklch(0.7690.18870.08);
104
+
--chart-4: oklch(0.6270.265303.9);
105
+
--chart-5: oklch(0.6450.24616.439);
106
+
--sidebar: oklch(0.20500);
107
+
--sidebar-foreground: oklch(0.98500);
108
+
--sidebar-primary: oklch(0.4880.243264.376);
109
+
--sidebar-primary-foreground: oklch(0.98500);
110
+
--sidebar-accent: oklch(0.26900);
111
+
--sidebar-accent-foreground: oklch(0.98500);
112
+
--sidebar-border: oklch(100 / 10%);
113
+
--sidebar-ring: oklch(0.55600);
114
+
}
115
+
116
+
/* Extending Tailwind theme with ShadCN utility classes. */
/* Applies some additional necessary border styles within the editor. */
157
+
@layer base {
158
+
.bn-shadcn* {
159
+
@applyborder-borderoutline-ring/50;
160
+
}
161
+
}
162
+
```
163
+
164
+
The values used are for the Neutral ShadCN color theme (used in demo above), but you can customize them however you'd like.
165
+
166
+
This website uses the exact same setup as the one described above, which you can see in [this file](https://github.com/TypeCellOS/BlockNote/blob/main/docs/app/global.css).
167
+
27
168
## ShadCN Customization
28
169
29
170
BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project.
0 commit comments