---
name: "@ericts"
slug: "ericts"
description: "Motion-focused shadcn-compatible components, hooks, and blocks for polished React interfaces."
category: "Animated components"
tags: ["animation", "audio", "auth", "blocks", "buttons", "cards", "forms", "hooks", "icons", "loaders", "maps", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "EricTsai83"
website: "https://ui.ericts.com"
github: "https://github.com/EricTsai83/ericts-ui"
registry: "https://ui.ericts.com/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 53
generated_at: "2026-09-21T01:50:16.753Z"
---

# @ericts

Motion-focused shadcn-compatible components, hooks, and blocks for polished React interfaces.

## Links

- Website: https://ui.ericts.com
- GitHub: https://github.com/EricTsai83/ericts-ui
- Registry JSON: https://ui.ericts.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ericts
- This file: https://sh4dcn.vercel.app/md/ericts.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.ericts.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.ericts.com/r/registry.json
bunx shadcn@latest add https://ui.ericts.com/r/registry.json
# clone the source repo
git clone https://github.com/EricTsai83/ericts-ui.git
# fetch the raw registry index
curl -s https://ui.ericts.com/r/registry.json
```

## Components (53)

| name | type | description | install |
| --- | --- | --- | --- |
| smooth-height | registry:ui | A Motion-powered layout primitive that observes content size and animates height changes. | `npx shadcn@latest add https://ui.ericts.com/r/smooth-height.json` |
| copy-button | registry:ui | A shadcn Button-based clipboard control with animated copy and success states. | `npx shadcn@latest add https://ui.ericts.com/r/copy-button.json` |
| icon-swap | registry:ui | A controlled binary icon transition with stable layout, interruptible state changes, and reduced-motion support. | `npx shadcn@latest add https://ui.ericts.com/r/icon-swap.json` |
| like | registry:ui | A composable heart toggle with controlled and uncontrolled state, a center-out fill transition, and a miniature-heart scatter. | `npx shadcn@latest add https://ui.ericts.com/r/like.json` |
| like-button | registry:ui | A ready-made labeled action built from the composable Like primitive. | `npx shadcn@latest add https://ui.ericts.com/r/like-button.json` |
| status-button | registry:ui | A shadcn Button-based action that transitions through idle, loading, and success states. | `npx shadcn@latest add https://ui.ericts.com/r/status-button.json` |
| expandable-toggle-button | registry:ui | A shadcn toggle button that expands from an icon into an icon-and-label action while keeping the icon anchored. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-toggle-button.json` |
| play-button | registry:ui | A circular media toggle whose glyph morphs between a play triangle and pause bars, with a ghost or frosted over-video surface. | `npx shadcn@latest add https://ui.ericts.com/r/play-button.json` |
| sliding-play-button | registry:ui | A circular media toggle built from three overlapping SVG elements that compress, slide, expand, and settle together with an optional duration override. | `npx shadcn@latest add https://ui.ericts.com/r/sliding-play-button.json` |
| floating-shortcut-button | registry:ui | A configurable floating action menu with coordinated size presets, a shrinking trigger, crossfading icon states, and staggered shortcuts. | `npx shadcn@latest add https://ui.ericts.com/r/floating-shortcut-button.json` |
| arc-menu | registry:ui | A bottom-anchored shortcut menu that fans actions along a configurable arc while its trigger shrinks and swaps from a shortcut grid to a close icon. | `npx shadcn@latest add https://ui.ericts.com/r/arc-menu.json` |
| status-badge | registry:ui | A compact animated badge for status labels with icon and text slot transitions. | `npx shadcn@latest add https://ui.ericts.com/r/status-badge.json` |
| floating-select | registry:ui | A single-button floating select that expands into an animated option list. | `npx shadcn@latest add https://ui.ericts.com/r/floating-select.json` |
| expandable-slider | registry:ui | A composable slider that stays expanded on mobile and grows from an icon button on desktop hover, focus, or drag. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-slider.json` |
| expandable-toolbar | registry:ui | A controlled or uncontrolled toolbar primitive that measures its action slot and expands from either side. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-toolbar.json` |
| check-mark | registry:ui | A pure SVG checkmark animation that draws a square or circle before the check. | `npx shadcn@latest add https://ui.ericts.com/r/check-mark.json` |
| shy-heart | registry:ui | A resizable brand-outline heart that leans left on hover before revealing soft blush marks. | `npx shadcn@latest add https://ui.ericts.com/r/shy-heart.json` |
| jitter | registry:ui | A jitter animation primitive plus a ready-made vibration icon. | `npx shadcn@latest add https://ui.ericts.com/r/jitter.json` |
| squeeze | registry:ui | A squeeze animation primitive plus a ready-made SVG card icon. | `npx shadcn@latest add https://ui.ericts.com/r/squeeze.json` |
| heartbeat | registry:ui | A Motion-powered heartbeat primitive with a projected shadow layer and reduced-motion support. | `npx shadcn@latest add https://ui.ericts.com/r/heartbeat.json` |
| projected-shadow | registry:ui | A CSS-powered primitive that layers an element with projected and contact shadows, supports an animation opt-out, and gathers on hover or active state. | `npx shadcn@latest add https://ui.ericts.com/r/projected-shadow.json` |
| otp-input | registry:ui | A fixed-slot one-time passcode input with paste, autofill, an error shake, and a staggered success wave. | `npx shadcn@latest add https://ui.ericts.com/r/otp-input.json` |
| adaptive-switch | registry:ui | An accessible switch with optional state labels, three sizes, and configurable motion. | `npx shadcn@latest add https://ui.ericts.com/r/adaptive-switch.json` |
| nav-link | registry:ui | Adds active, exact, and pending route state to Next.js App Router links, with typed routes, nested matching, and Cache Components support. | `npx shadcn@latest add https://ui.ericts.com/r/nav-link.json` |
| highlight-tabs | registry:ui | A Motion-powered tab list with a shared highlight indicator and keyboard navigation. | `npx shadcn@latest add https://ui.ericts.com/r/highlight-tabs.json` |
| filter-tags | registry:ui | A horizontally scrollable multi-select tag row that groups selected tags first in selection order, with responsive controls and reduced-motion support. | `npx shadcn@latest add https://ui.ericts.com/r/filter-tags.json` |
| sliding-list | registry:ui | A controlled or uncontrolled vertical list with optional initial selection, mirrored alignment, and a dot, dash, or custom icon indicator. | `npx shadcn@latest add https://ui.ericts.com/r/sliding-list.json` |
| rail-list | registry:ui | A controlled or uncontrolled horizontal selector rail with centered labels, roving focus, and an edge-underline indicator on the active item. | `npx shadcn@latest add https://ui.ericts.com/r/rail-list.json` |
| rail-stage | registry:block | A composed content browser that pairs a scalable vertical rail with one focused stage, collapsing to a scrollable strip on small screens. | `npx shadcn@latest add https://ui.ericts.com/r/rail-stage.json` |
| mermaid-diagram | registry:block | A responsive Mermaid rendering surface with streaming and error states, repair hooks, and an accessible pan-and-zoom fullscreen viewer. | `npx shadcn@latest add https://ui.ericts.com/r/mermaid-diagram.json` |
| expandable-segmented-tabs | registry:ui | A Motion-powered segmented tab list for switching modes or views, with an active tab that expands from icon-only into a label. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-segmented-tabs.json` |
| expandable-tabs | registry:ui | A DynamicIsland-style toolbar whose icon tabs expand into actionable menu or content panels, with full keyboard and ARIA support. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-tabs.json` |
| expandable-panel | registry:ui | A floating panel that grows from a compact icon trigger and holds arbitrary content. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-panel.json` |
| navigation-menu | registry:ui | A Base UI navigation menu with centered popups, animated viewport sizing, and shadcn-style composition. | `npx shadcn@latest add https://ui.ericts.com/r/navigation-menu.json` |
| text-morph | registry:ui | A Motion-powered text primitive that morphs matching characters between string updates. | `npx shadcn@latest add https://ui.ericts.com/r/text-morph.json` |
| timer | registry:ui | Countdown and count-up timers with optional controls, accurate deadline tracking, customizable digit slots, and opt-out motion. | `npx shadcn@latest add https://ui.ericts.com/r/timer.json` |
| expandable-dialog | registry:ui | A shared-layout dialog that expands list items into an accessible detail view. | `npx shadcn@latest add https://ui.ericts.com/r/expandable-dialog.json` |
| context-cursor | registry:ui | A scoped custom cursor for pointer-rich surfaces where each target can register its own label, icon, and interaction intent. | `npx shadcn@latest add https://ui.ericts.com/r/context-cursor.json` |
| feedback-popover | registry:ui | A Motion-powered feedback popover that expands from a trigger, supports keyboard submission, and confirms receipt inline. | `npx shadcn@latest add https://ui.ericts.com/r/feedback-popover.json` |
| multi-step | registry:ui | A Motion-powered multi-step container that slides between steps and animates height changes. | `npx shadcn@latest add https://ui.ericts.com/r/multi-step.json` |
| adaptive-drawer | registry:ui | A shadcn Drawer that measures panel content and animates height changes. | `npx shadcn@latest add https://ui.ericts.com/r/adaptive-drawer.json` |
| staggered-entrance | registry:ui | A CSS-powered staggered entrance primitive for lists, cards, steps, rows, and search results. | `npx shadcn@latest add https://ui.ericts.com/r/staggered-entrance.json` |
| scroll-expand | registry:block | An art-directed scroll hero that expands a detail into context or focuses a full-bleed scene into a discovery. | `npx shadcn@latest add https://ui.ericts.com/r/scroll-expand.json` |
| ripple-scene | registry:block | An immersive scene selector whose photo lifts into a travelling corrugated wave, swapping to the next scene at the crest before settling flat. | `npx shadcn@latest add https://ui.ericts.com/r/ripple-scene.json` |
| vertical-scene | registry:block | A direction-aware gallery that reveals later scenes from below and earlier scenes from above with a paired vertical image transition. | `npx shadcn@latest add https://ui.ericts.com/r/vertical-scene.json` |
| deck-lift | registry:block | A screen whose resting card deck lifts to the top, drops the sheet away, and pulls a full page of detail up behind it, then swipes card by card. | `npx shadcn@latest add https://ui.ericts.com/r/deck-lift.json` |
| use-scroll-progress | registry:hook | A render-free vertical scroll progress hook for window or element scrollers with optional time-based smoothing. | `npx shadcn@latest add https://ui.ericts.com/r/use-scroll-progress.json` |
| use-swipe-navigation | registry:hook | A touch-first React hook for previous and next navigation with configurable feedback, live gesture progress, direction locking, ownership, and reduced-motion s… | `npx shadcn@latest add https://ui.ericts.com/r/use-swipe-navigation.json` |
| use-sequence-player | registry:hook | A client-safe React hook that spotlights one scripted animation sequence at a time, pausing off-screen, on hidden tabs, while focused, and under reduced motion. | `npx shadcn@latest add https://ui.ericts.com/r/use-sequence-player.json` |
| use-reduced-motion | registry:hook | A client-safe React hook for reading prefers-reduced-motion and reacting to preference changes. | `npx shadcn@latest add https://ui.ericts.com/r/use-reduced-motion.json` |
| use-element-height | registry:hook | A client-safe React hook that measures an element's height with ResizeObserver so a container can animate between content heights. | `npx shadcn@latest add https://ui.ericts.com/r/use-element-height.json` |
| use-element-size-map | registry:hook | A client-safe React hook that measures multiple keyed element sizes with ResizeObserver so animated shells can morph to active content. | `npx shadcn@latest add https://ui.ericts.com/r/use-element-size-map.json` |
| use-scroll-anchor | registry:hook | A client-safe React hook that parks a selected item at a fixed anchor point in a scroll container, with a configurable easing and duration — the click-to-scrol… | `npx shadcn@latest add https://ui.ericts.com/r/use-scroll-anchor.json` |

## For AI agents

```text
You are adding components from @ericts to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ericts.md) for the component list.
2. Fetch the machine-readable index: https://ui.ericts.com/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: ericts).
```