GodUI

Floating Toolbar

A context toolbar that springs into view with magnetic, morphing action buttons.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/floating-toolbar.json"

Usage

Drive open from a selection or hover state to spring the toolbar in and out.

tsx
 
import { FloatingToolbar } from "@godui/components";

const [open, setOpen] = useState(false);

<FloatingToolbar
  open={open}
  actions={[{ icon: <BoldIcon />, label: "Bold", onClick: bold }]}
/>;

Props

PropTypeDefaultDescription
actionsToolbarAction[]{ icon, label, onClick?, active?, disabled? }.
openbooleantrueMount/unmount with a spring entrance.
childrenReactNodeTrailing content (dividers, extra controls).

On this page

Built with GodUI

Beautifully crafted motion components for modern interfaces.

Star on GitHub