---
name: "@chewypixel"
slug: "chewypixel"
description: "Animated components from the Chewypixel templates, built with Motion."
category: "Animated components"
tags: ["animation", "blocks", "buttons", "charts", "forms", "loaders", "media", "navigation", "overlays", "retro"]
framework: "react"
license: null
author: null
website: "https://chewypixel.io/components"
github: null
registry: "https://chewypixel.io/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 25
generated_at: "2026-10-27T06:34:08.542Z"
---

# @chewypixel

Animated components from the Chewypixel templates, built with Motion.

## Links

- Website: https://chewypixel.io/components
- Registry JSON: https://chewypixel.io/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/chewypixel
- This file: https://sh4dcn.netlify.app/md/chewypixel.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# fetch the raw registry index
curl -s https://chewypixel.io/r/registry.json
```

## Components (25)

| name | type | description | install |
| --- | --- | --- | --- |
| segmented-control | registry:ui | Mutually exclusive options with a highlight that slides to the selected one. | `npx shadcn@latest add https://chewypixel.io/r/segmented-control.json` |
| tabs | registry:ui | 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` |
| switch | registry:ui | A switch whose thumb springs across when toggled and stretches while pressed. | `npx shadcn@latest add https://chewypixel.io/r/switch.json` |
| checkbox | registry:ui | A checkbox that draws its check mark and squishes when pressed. | `npx shadcn@latest add https://chewypixel.io/r/checkbox.json` |
| status | registry:ui | A colored dot and a label for showing state, with an optional pulse. | `npx shadcn@latest add https://chewypixel.io/r/status.json` |
| animated-number | registry:ui | A number that counts to its new value when it changes. | `npx shadcn@latest add https://chewypixel.io/r/animated-number.json` |
| radio-group | registry:ui | 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` |
| tooltip | registry:ui | 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` |
| dialog | registry:ui | 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` |
| sheet | registry:ui | 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` |
| dropdown-menu | registry:ui | 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` |
| command | registry:ui | A command palette whose highlight glides between results as you move through them. | `npx shadcn@latest add https://chewypixel.io/r/command.json` |
| collapsible | registry:ui | A section that opens and closes by animating its height. | `npx shadcn@latest add https://chewypixel.io/r/collapsible.json` |
| image-lightbox | registry:ui | 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` |
| select | registry:ui | 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` |
| popover | registry:ui | 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` |
| date-picker | registry:ui | 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` |
| password-input | registry:ui | 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` |
| code-input | registry:ui | 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` |
| copy-button | registry:ui | 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` |
| shimmer | registry:ui | Text with a band of light sweeping across it, for loading and thinking states. | `npx shadcn@latest add https://chewypixel.io/r/shimmer.json` |
| status-graphic | registry:ui | 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` |
| avatar-group | registry:ui | Overlapping avatars with a +N count once there are more than fit. | `npx shadcn@latest add https://chewypixel.io/r/avatar-group.json` |
| typing-indicator | registry:ui | Three dots that bob in turn while someone is typing. | `npx shadcn@latest add https://chewypixel.io/r/typing-indicator.json` |
| emoji-picker | registry:ui | 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` |

## For AI agents

```text
You are adding components from @chewypixel to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/chewypixel.md) for the component list.
2. Fetch the machine-readable index: https://chewypixel.io/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: chewypixel).
```