Toolbar

PreviousNext

AI-powered toolbar component.

Docs
ai-elementscomponent

Preview

Loading preview…
registry/default/ai-elements/toolbar.tsx
import { cn } from "@/lib/utils";
import { NodeToolbar, Position } from "@xyflow/react";
import type { ComponentProps } from "react";

type ToolbarProps = ComponentProps<typeof NodeToolbar>;

export const Toolbar = ({ className, ...props }: ToolbarProps) => (
  <NodeToolbar
    className={cn(
      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
      className
    )}
    position={Position.Bottom}
    {...props}
  />
);

Installation

npx shadcn@latest add @ai-elements/toolbar

Usage

import { Toolbar } from "@/components/toolbar"
<Toolbar />