āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ai-elements/controls ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A styled controls component for React Flow-based canvases with zoom and fit view functionality. [ ] Copy Markdown [ ] Open
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.
ai-elements shadow manual
npx ai-elements@latest add controls
import { Controls } from '@/components/ai-elements/controls';
<ReactFlow> <Controls /> </ReactFlow>| 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 |
Prop: className? Type: string
Prop: ...props? Type: ComponentProps<typeof Controls>
< Connection A custom connection line component for React Flow-based
Edge > Customizable edge components for React Flow canvases
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā