Floating Toolbar

1
2
3'use client';

import { useRef, type ReactNode } from 'react';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/floating-toolbar.json

Usage#

import { FloatingToolbar } from '@/components/layout/floating-toolbar';

<FloatingToolbar aria-label="Text formatting">
  <Button variant="ghost" size="icon-sm" aria-label="Bold">
    <BoldIcon aria-hidden />
  </Button>
</FloatingToolbar>

Use it for the floating tool palette of an editor canvas; place it with the caller's className, for example absolute bottom-3 left-1/2 -translate-x-1/2 z-20.

API reference#

FloatingToolbar#

Renders a div and takes every prop a div takes. A rounded, blurred card-colour bar with a hairline ring and a shadow, around the tools the caller composes. It is a toolbar landmark, so give it an aria-label. pointer-events-auto keeps it clickable inside a pointer-events-none canvas overlay. It sets data-slot="floating-toolbar" and role="toolbar".