• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
drewmcdonald

drewmcdonald

promptCompare

Public
Like
promptCompare
Home
Code
7
.claude
3
backend
3
docs
4
frontend
4
shared
1
.mcp.json
deno.json
Environment variables
2
Branches
1
Pull requests
Remixes
History
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
.claude
/
skills
/
ai-elements
/
references
/
controls.md
Code
/
.claude
/
skills
/
ai-elements
/
references
/
controls.md
Search
…
Viewing readonly version of main branch: v164
View latest version
controls.md

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.

Installation

npx ai-elements@latest add controls

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 />

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the controls.
...propsComponentProps<typeof Controls>-Any other props from @xyflow/react Controls component (showZoom, showFitView, showInteractive, position, etc.).
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.