Docs
StarterKit
StarterKit
StarterKit is a collection of most used Tiptap extensions.
Installation
Run the following command to install the extension & associated toolbar components.
npx shadcn add https://tiptap.niazmorshed.dev/r/starter-kit.jsonRunning this command will add the following toolbars to your project.
- Bold
- Italic
- Strikethrough
- Code
- Bullet List
- Ordered List
- Blockquote
- Code Block
- Horizontal Rule
- Hard Break
- Redo
- Undo
Usage
const extensions = [
StarterKit.configure({
orderedList: {
HTMLAttributes: {
class: "list-decimal",
},
},
bulletList: {
HTMLAttributes: {
class: "list-disc",
},
},
code: {
HTMLAttributes: {
class: "bg-accent rounded-md p-1",
},
},
horizontalRule: {
HTMLAttributes: {
class: "my-2",
},
},
codeBlock: {
HTMLAttributes: {
class: "bg-primary text-primary-foreground p-2 text-sm rounded-md p-1",
},
},
heading: {
levels: [1, 2, 3, 4],
HTMLAttributes: {
class: "tiptap-heading",
},
},
}),
// ...rest of the extensions
];
const editor = useEditor({
extensions,
content: "<h2 class="tiptap-heading" style="text-align: center">Hello world 🌍</h2>",
});