Installation

ProseKit Components are styled using Tailwind CSS or UnoCSS. Pick the one that you like.

Tailwind CSS

1. Add Tailwind CSS

   Install Tailwind CSS following the official guide.

2. Add dependencies

   npm install prosekit tailwindcss-animate @egoist/tailwindcss-icons @iconify-json/lucide

3. Configure tailwind.config.js

   Add the following plugins to your Tailwind CSS config.

   const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons') 
   const animate = require('tailwindcss-animate') 
   
   /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
     plugins: [
       iconsPlugin({ collections: getIconCollections(['lucide']) }), 
       animate, 
     ],
   }

4. That's it

   You can now start adding the editor to your project.

UnoCSS

1. Add UnoCSS

   Install UnoCSS following the official guide.

2. Add dependencies

   npm install prosekit unocss-preset-animations @iconify-json/lucide

3. Configure unocss.config.ts

   Add the following presets to your UnoCSS config.

   import { defineConfig, presetIcons, presetWind } from 'unocss'
   import { presetAnimations } from 'unocss-preset-animations'
   
   export default defineConfig({
     presets: [presetIcons(), presetWind(), presetAnimations()], 
   })

4. That's it

   You can now start adding the editor to your project.