Textarea animation
A textarea that turns invalid after a submit gives one short shake; never while you type.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| It turns invalid after a submit or blur | One short shake | 240 ms | Automatic |
Install
Textarea is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add textareaTurn it off
Put data-cut="none" on a textarea (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.
Tabs
Animate shadcn/ui Tabs: the indicator slides to the new tab, the panel follows a beat later and the height eases to fit. Works on Base UI and Radix.
Toast
Animate shadcn/ui Sonner toasts: each toast flies out of the button you pressed, so people see which action it belongs to. Base UI toasts work too.