Controls

A styled controls component for React Flow-based canvases with zoom and fit view functionality.

The Controls component provides interactive zoom and fit view controls for React Flow canvases. It includes a modern, themed design with backdrop blur and card styling.

The Controls component is designed to be used with the Canvas component. See the Workflow demo for a full example.

Installation

npx ai-elements@latest add controls

npx ai-elements@latest add controls

npx shadcn@latest add @ai-elements/controls

npx shadcn@latest add @ai-elements/controls

"use client";

import { cn } from "@repo/shadcn-ui/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}
  />
);

"use client";import { cn } from "@repo/shadcn-ui/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}  />);

Usage

import { Controls } from '@/components/ai-elements/controls';

<ReactFlow>
  <Controls />
</ReactFlow>

Features

Zoom in/out controls
Fit view button to center and scale content
Rounded pill design with backdrop blur
Theme-aware card background
Subtle drop shadow for depth
Full TypeScript support
Compatible with all React Flow control features

Props

`<Controls />`

Prop

Type

Installation

Usage

Features

Props

<Controls />

On this page

`<Controls />`