How do I install the Direction Aware Selection?

Run npx shadcn@latest add @aceternity/direction-aware-selection. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI adds the file to components/interactions/direction-aware-selection.tsx and installs Motion. You can also ask an agent with the shadcn MCP server connected, or copy the prompt with the full source into any AI tool.

Is the Direction Aware Selection included with All-Access?

Yes. Interactions are included with the Aceternity UI All-Access plan (1-Year License, Lifetime, or an active yearly subscription). Anyone can play with the preview and the controls; All-Access unlocks the code, the CLI and MCP install, and the prompt.

Can I change how the Direction Aware Selection moves?

Yes. Use the controls next to the preview to change the timing and the motion in real time. Every control is a prop of the component.

Yes. It uses native elements and ARIA roles, works with the keyboard, follows your shadcn/ui theme tokens, and reduces motion when the system asks for reduced motion.

1 / 15

Direction Aware Selection

An intro paragraph where each name and its logo select like layers in a design tool. A frame with resize handles and a live size tag slides between them, and the logo fills with color from the edge your pointer came in.

Hi, I'm ManuArora. I build AceternityUI for developers and VibrantDesign for designers.

Dependencies

motion

Frequently asked questions

How do I install the Direction Aware Selection?: Run npx shadcn@latest add @aceternity/direction-aware-selection. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI adds the file to components/interactions/direction-aware-selection.tsx and installs Motion. You can also ask an agent with the shadcn MCP server connected, or copy the prompt with the full source into any AI tool.
Is the Direction Aware Selection included with All-Access?: Yes. Interactions are included with the Aceternity UI All-Access plan (1-Year License, Lifetime, or an active yearly subscription). Anyone can play with the preview and the controls; All-Access unlocks the code, the CLI and MCP install, and the prompt.
Can I change how the Direction Aware Selection moves?: Yes. Use the controls next to the preview to change the timing and the motion in real time. Every control is a prop of the component.
Is it accessible?: Yes. It uses native elements and ARIA roles, works with the keyboard, follows your shadcn/ui theme tokens, and reduces motion when the system asks for reduced motion.

Set up the CLI and MCP · All interactions

Dependencies

Tags

Frequently asked questions