Vector Editor Toolbar

A floating toolbar with tool selection, nested flyouts, and a properties panel. Renders as a menu with interactive elements. Behaves with transitions and focus management. Use when needing a Figma-style vector editor interface.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/vector-editor-toolbar

npx layro-cli add @educlopez/vector-editor-toolbar

npx layro-cli add @educlopez/vector-editor-toolbar

bunx layro-cli add @educlopez/vector-editor-toolbar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  type ComponentType,
  type KeyboardEvent as ReactKeyboardEvent,
  type MouseEvent as ReactMouseEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.

Similar components

View all

Menubar

Dock