Skip to main content
Yoopta Editor provides a comprehensive set of pre-built UI components through the @yoopta/ui package. These components are designed to work seamlessly with the editor and provide common functionality like toolbars, menus, and drag-and-drop interfaces.

​
Installation

npm install @yoopta/ui
# or
yarn add @yoopta/ui
# or
pnpm add @yoopta/ui

​
Available Components

​
Selection and Toolbar

FloatingToolbar

Text selection toolbar with formatting options

SelectionBox

Visual selection box for multi-block selection

​
Block Actions

FloatingBlockActions

Floating actions that appear on block hover

BlockOptions

Context menu for block-level operations

​
Command Interface

SlashCommandMenu

Slash command menu for quick block insertion

​
Drag and Drop

Drag and Drop

Block reordering with drag and drop functionality

​
Component Architecture

All UI components follow a composable pattern using compound components: 
<Component>
  <Component.Trigger />
  <Component.Content>
    <Component.Item />
  </Component.Content>
</Component>
This pattern provides flexibility while maintaining sensible defaults.

​
Styling

Components come with base styles via CSS files. You can:
  1. Use default styles - Import component CSS files
  2. Override with custom CSS - Use className props
  3. Use with themes - Apply theme packages like @yoopta/themes-shadcn
import { FloatingToolbar } from '@yoopta/ui';
import '@yoopta/ui/floating-toolbar/styles.css';

// With custom className
<FloatingToolbar className="my-custom-toolbar">
  {/* ... */}
</FloatingToolbar>

​
Integration with Editor

Components are designed to work as children of YooptaEditor: 
import YooptaEditor from '@yoopta/editor';
import { FloatingToolbar, SlashCommandMenu } from '@yoopta/ui';

function MyEditor() {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <YooptaEditor editor={editor}>
      <FloatingToolbar />
      <SlashCommandMenu />
    </YooptaEditor>
  );
}

​
Accessibility

All components include:
  • Proper ARIA attributes
  • Keyboard navigation support
  • Focus management
  • Screen reader compatibility

​
TypeScript Support

Full TypeScript support with exported types for all component props: 
import type { 
  FloatingToolbarProps,
  SlashCommandMenuProps,
  BlockOptionsProps 
} from '@yoopta/ui';

​
Next Steps

FloatingToolbar

Build a custom text formatting toolbar

SlashCommandMenu

Create a slash command interface

Drag and Drop

Enable block reordering

Custom Components

Build your own UI components

Build docs developers (and LLMs) love

Get started for freeTalk to us