---
name: "@chewypixel"
slug: "chewypixel"
description: "Animated components from the Chewypixel templates, built with Motion."
category: "Animated components"
tags: ["animation", "blocks", "buttons", "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: 14
generated_at: "2026-10-20T06:35:22.791Z"
---

# @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.vercel.app/registry/chewypixel
- This file: https://sh4dcn.vercel.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 (14)

| 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` |

## For AI agents

```text
You are adding components from @chewypixel to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: chewypixel).
```