Animated React Controls: Pickers, Inputs, and Menus
Inputs and menus that respond physically. A date picker and a searchable select, a number stepper with rolling digits, a one-time-code input, segmented tabs with a stretching pill, a nested command palette, an iOS-style bottom sheet with detents, a rotary knob, and a few playful pieces like a receipt printer and an elastic drag-select.
24 components · Browse all components
Components
Copy Button
Segmented Control
Number Stepper
Glow Input
Email Capture
Card Stack
Date Picker
Animated Select
Command Palette
OTP Input
Detent Drawer
Notch
Physical Knob
Reaction Arc
Receipt Printer
Rubber Band Select
Morphing Tray
Keyboard
Infinity Canvas
Scratch Card
Multi Select
File Dropzone
Halftone Popover
Cookie Consent
FAQ
- Are the controls accessible form inputs?
- The form controls are. The date picker, select, number stepper, OTP input, segmented control, command palette and knob are keyboard-operable with matching ARIA roles (grid, combobox, spinbutton, tablist, slider), built on native inputs where one exists, with the animation layered on top. Playful pieces like the receipt printer and scratch card are visual, not inputs.
- How do I install the components in Controls?
- With the shadcn CLI. Each component page lists its exact command: free components install from a public URL (npx shadcn add https://useplanes.com/r/<name>.json), Pro components install by name (npx shadcn add @useplanes/<name>) after npx @useplanes/cli init --key <key>.
- Do they work with Next.js App Router and Tailwind CSS v4?
- Yes. Every component is a React 19 client component styled with Tailwind CSS v4, and works in Next.js App Router, Vite, or any React app with Tailwind CSS v4.
- Are the components in Controls free?
- 3 of the 24 are free. The rest need a one-time Planes Pro license, which covers every component and future additions.
- What do they depend on?
- Motion (formerly Framer Motion) is the only runtime animation dependency. The CLI writes the .tsx source into your project, so there is no Planes package to keep updated.