Controls

PreviousNext

AI-powered controls component.

Docs
ai-elementscomponent

Preview

Loading preview…
registry/default/ai-elements/controls.tsx
"use client";

import { cn } from "@/lib/utils";
import { Controls as ControlsPrimitive } from "@xyflow/react";
import type { ComponentProps } from "react";

export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;

export const Controls = ({ className, ...props }: ControlsProps) => (
  <ControlsPrimitive
    className={cn(
      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
      className
    )}
    {...props}
  />
);

Installation

npx shadcn@latest add @ai-elements/controls

Usage

import { Controls } from "@/components/controls"
<Controls />