@chewypixel
Animated components from the Chewypixel templates, built with Motion.
Install this registry
npx shadcn@latest add https://chewypixel.io/r/registry.json pnpm dlx shadcn@latest add https://chewypixel.io/r/registry.json bunx shadcn@latest add https://chewypixel.io/r/registry.json curl -s https://chewypixel.io/r/registry.json Components
25 totalMutually exclusive options with a highlight that slides to the selected one.
npx shadcn@latest add https://chewypixel.io/r/segmented-control.json Underline tabs. The underline slides to the active tab and resizes to fit its label.
npx shadcn@latest add https://chewypixel.io/r/tabs.json A switch whose thumb springs across when toggled and stretches while pressed.
npx shadcn@latest add https://chewypixel.io/r/switch.json A checkbox that draws its check mark and squishes when pressed.
npx shadcn@latest add https://chewypixel.io/r/checkbox.json A colored dot and a label for showing state, with an optional pulse.
npx shadcn@latest add https://chewypixel.io/r/status.json A number that counts to its new value when it changes.
npx shadcn@latest add https://chewypixel.io/r/animated-number.json Radio buttons that squish when pressed, with a dot that springs in when picked.
npx shadcn@latest add https://chewypixel.io/r/radio-group.json A tooltip on a frosted panel that scales in from its trigger and fades out when you move away.
npx shadcn@latest add https://chewypixel.io/r/tooltip.json A dialog that springs up over a light overlay and animates out before it closes.
npx shadcn@latest add https://chewypixel.io/r/dialog.json A side panel that slides in from any edge of the screen over a light overlay.
npx shadcn@latest add https://chewypixel.io/r/sheet.json A frosted menu that scales out of its trigger and animates out when it closes.
npx shadcn@latest add https://chewypixel.io/r/dropdown-menu.json A command palette whose highlight glides between results as you move through them.
npx shadcn@latest add https://chewypixel.io/r/command.json A section that opens and closes by animating its height.
npx shadcn@latest add https://chewypixel.io/r/collapsible.json A thumbnail that flies out to a larger view in the middle of the screen, over a lightly blurred page.
npx shadcn@latest add https://chewypixel.io/r/image-lightbox.json A select whose list pops open on a frosted panel, with a soft halo on the trigger while it's open.
npx shadcn@latest add https://chewypixel.io/r/select.json A frosted panel that scales in from its trigger and animates out before it closes.
npx shadcn@latest add https://chewypixel.io/r/popover.json A date field that opens a calendar. Months slide in the direction you page, and arrow keys move between days.
npx shadcn@latest add https://chewypixel.io/r/date-picker.json A password field with a button that shows or hides what you typed. The eye icon swaps with a quick pop.
npx shadcn@latest add https://chewypixel.io/r/password-input.json One box per digit for verification codes, with a blinking caret in the next box. Pasting a code and autofill from SMS both work.
npx shadcn@latest add https://chewypixel.io/r/code-input.json An icon button that copies text. The copy icon pops into a check, then back.
npx shadcn@latest add https://chewypixel.io/r/copy-button.json Text with a band of light sweeping across it, for loading and thinking states.
npx shadcn@latest add https://chewypixel.io/r/shimmer.json Illustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.
npx shadcn@latest add https://chewypixel.io/r/status-graphic.json Overlapping avatars with a +N count once there are more than fit.
npx shadcn@latest add https://chewypixel.io/r/avatar-group.json Three dots that bob in turn while someone is typing.
npx shadcn@latest add https://chewypixel.io/r/typing-indicator.json A searchable emoji picker with categories and a preview of the emoji you're on.
npx shadcn@latest add https://chewypixel.io/r/emoji-picker.json