---
name: "@easeui"
slug: "easeui"
description: "Open-source React components with natural motion, installable as source."
category: "Animated components"
tags: ["ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "loaders", "media", "navigation", "overlays", "retro", "tables", "theming"]
framework: "react"
license: null
author: "rjcuff"
website: "https://easeui.dev"
github: "https://github.com/rjcuff/easeui"
registry: "https://easeui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 50
generated_at: "2026-09-21T01:50:16.753Z"
---

# @easeui

Open-source React components with natural motion, installable as source.

## Links

- Website: https://easeui.dev
- GitHub: https://github.com/rjcuff/easeui
- Registry JSON: https://easeui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/easeui
- This file: https://sh4dcn.vercel.app/md/easeui.md

## Install

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

## Components (50)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:component | Expanding sections that grow to their natural height with no measuring, with arrow key navigation and closed panels skipped by Tab. | `npx shadcn@latest add https://easeui.dev/r/accordion.json` |
| alert | registry:component | Banner with a colored accent stripe. Body text stays neutral so contrast never depends on the variant. | `npx shadcn@latest add https://easeui.dev/r/alert.json` |
| avatar | registry:component | Round avatar whose image fades in on load and crossfades to initials if it fails. | `npx shadcn@latest add https://easeui.dev/r/avatar.json` |
| badge | registry:component | Small status pill in five colors, with a crossfade for when its variant changes. | `npx shadcn@latest add https://easeui.dev/r/badge.json` |
| button | registry:component | Button with a quick press, hairline rings instead of borders, four variants, and a 44px tap area even at small sizes. | `npx shadcn@latest add https://easeui.dev/r/button.json` |
| card | registry:component | Bordered surface with header, content, and footer parts for grouping related content. | `npx shadcn@latest add https://easeui.dev/r/card.json` |
| checkbox | registry:component | Checkbox on a real checkbox input, with a check mark that pops in rather than just appearing. | `npx shadcn@latest add https://easeui.dev/r/checkbox.json` |
| command-palette | registry:component | Command-K style search overlay that filters as you type, with arrow keys to move the highlight and Enter to select. | `npx shadcn@latest add https://easeui.dev/r/command-palette.json` |
| copy-button | registry:component | Copies text to the clipboard and trades its icon for a check for a moment, with a label or as a single icon. | `npx shadcn@latest add https://easeui.dev/r/copy-button.json` |
| diff-view | registry:component | A line-by-line diff with an added or removed mark in the gutter and a tinted row for each side. Renders a diff, doesn't compute one. | `npx shadcn@latest add https://easeui.dev/r/diff-view.json` |
| drawer | registry:component | Sheet that slides up from the bottom edge on the native dialog element. Drag the handle down, or flick it, to dismiss. | `npx shadcn@latest add https://easeui.dev/r/drawer.json` |
| dropdown-menu | registry:component | Action menu that opens from a trigger, flips upward when there is no room below, and supports a destructive item. | `npx shadcn@latest add https://easeui.dev/r/dropdown-menu.json` |
| dynamic-island | registry:component | A pill that morphs between a compact status line and any number of named live-activity views, the same element reshaping via layout animation each time. | `npx shadcn@latest add https://easeui.dev/r/dynamic-island.json` |
| expandable-tabs | registry:component | A row of icon tabs where the selected one expands to reveal its label, sliding a shared background pill to match. | `npx shadcn@latest add https://easeui.dev/r/expandable-tabs.json` |
| file-upload | registry:component | Dropzone that also opens the native file picker, with a list below it that pops each file in and collapses smoothly on remove. | `npx shadcn@latest add https://easeui.dev/r/file-upload.json` |
| gradient-text | registry:component | Text filled with a slowly drifting rainbow. It pauses while off screen and holds still when reduced motion is on. | `npx shadcn@latest add https://easeui.dev/r/gradient-text.json` |
| hold-to-confirm | registry:component | Button for destructive actions that fills while you hold it and only fires once the fill completes. Letting go early drains it back quickly. | `npx shadcn@latest add https://easeui.dev/r/hold-to-confirm.json` |
| input | registry:component | Text input whose focus ring grows from a hairline to two px, with a destructive ring for aria-invalid. | `npx shadcn@latest add https://easeui.dev/r/input.json` |
| insight-card | registry:component | A stat tile: a label, a headline value, and an optional trend pill. Pass a Number Ticker as the value to have it roll in on change. | `npx shadcn@latest add https://easeui.dev/r/insight-card.json` |
| modal | registry:component | Centered dialog on the native dialog element that fades and scales in, leaves faster than it arrives, and keeps focus inside while open. | `npx shadcn@latest add https://easeui.dev/r/modal.json` |
| morphing-search | registry:component | A circular search button that morphs into a text field: the same element grows and reshapes via a layout animation, rather than a new one popping in beside it. | `npx shadcn@latest add https://easeui.dev/r/morphing-search.json` |
| notification-stack | registry:component | A deck of notification cards: collapsed to the top card with peeking edges behind it, fanning into a readable list on hover or focus. | `npx shadcn@latest add https://easeui.dev/r/notification-stack.json` |
| number-ticker | registry:component | Number that rolls to a new value like an odometer, one changed digit at a time. | `npx shadcn@latest add https://easeui.dev/r/number-ticker.json` |
| otp-input | registry:component | One box per digit for a verification code, with paste and SMS autofill support and a shake for a wrong code. | `npx shadcn@latest add https://easeui.dev/r/otp-input.json` |
| popover | registry:component | A panel of arbitrary content anchored to a trigger, opening on click and flipping above it when there's no room below. | `npx shadcn@latest add https://easeui.dev/r/popover.json` |
| progress | registry:component | Progress bar that fills with scale instead of width, plus an indeterminate state for unknown durations. | `npx shadcn@latest add https://easeui.dev/r/progress.json` |
| pull-to-refresh | registry:component | A pull-down gesture over scrollable content: the indicator tracks the finger 1:1, then resists past the trigger distance and spins while refreshing. | `npx shadcn@latest add https://easeui.dev/r/pull-to-refresh.json` |
| range-slider | registry:component | Native range input with a filled track and tick dots, so keyboard and screen reader support come built in. | `npx shadcn@latest add https://easeui.dev/r/range-slider.json` |
| select | registry:component | Composable select whose menu fades and scales out of the trigger, and opens upward when there is no room below. | `npx shadcn@latest add https://easeui.dev/r/select.json` |
| selection-actions | registry:component | A floating bar of bulk actions that fades and rises in once a selection leaves zero, for pairing with Table or any selectable list. | `npx shadcn@latest add https://easeui.dev/r/selection-actions.json` |
| skeleton | registry:component | Loading placeholder with one shimmer shared across the page. Wrap real content and it takes the same shape, then crossfades away. | `npx shadcn@latest add https://easeui.dev/r/skeleton.json` |
| switch | registry:component | On and off switch with a quick slide and no bounce. Inside a label, the whole row is the tap target. | `npx shadcn@latest add https://easeui.dev/r/switch.json` |
| table | registry:component | A plain, composable data table: sortable headers with an arrow that only shows on hover until active, and rows that tint when selected. | `npx shadcn@latest add https://easeui.dev/r/table.json` |
| tabs | registry:component | Pill, segment, or underline tabs with an indicator that slides to the selected tab. | `npx shadcn@latest add https://easeui.dev/r/tabs.json` |
| text-animation | registry:component | One component, three ways to animate text: a scramble that resolves into place, a word or character reveal out of a blur, and a loading shimmer sweep. | `npx shadcn@latest add https://easeui.dev/r/text-animation.json` |
| textarea | registry:component | Textarea that grows with its content instead of scrolling, down to three rows and up to a scrollable cap. | `npx shadcn@latest add https://easeui.dev/r/textarea.json` |
| theme-toggle | registry:component | Light and dark switch that reveals the new theme as a circle growing from the center of the screen or from the button itself. | `npx shadcn@latest add https://easeui.dev/r/theme-toggle.json` |
| toast | registry:component | Toasts that stay long enough to read based on their word count, and pause while hovered or while the tab is in the background. | `npx shadcn@latest add https://easeui.dev/r/toast.json` |
| tooltip | registry:component | Tooltip that shows a label with its keyboard shortcut, using Command on Mac and Ctrl elsewhere. Moving along a toolbar crossfades to the next tooltip with no d… | `npx shadcn@latest add https://easeui.dev/r/tooltip.json` |
| agent-loading-states | registry:component | Three loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases. | `npx shadcn@latest add https://easeui.dev/r/agent-loading-states.json` |
| code-block | registry:component | A code block with a label, a copy button, and light coloring for keywords, strings, comments and numbers, with no highlighter dependency. | `npx shadcn@latest add https://easeui.dev/r/code-block.json` |
| flowchart | registry:component | A sequence of steps on a dotted canvas, connected by curves that measure the actual cards and follow as you drag one. Click a step to light up its connectors, … | `npx shadcn@latest add https://easeui.dev/r/flowchart.json` |
| message-bubble | registry:component | A focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on arrival. | `npx shadcn@latest add https://easeui.dev/r/message-bubble.json` |
| pixel-loader | registry:component | A 3x3 grid of cells that twinkle on independent, randomized cycles, paired with a shimmering label and an optional live elapsed timer. | `npx shadcn@latest add https://easeui.dev/r/pixel-loader.json` |
| prompt-input | registry:component | A chat composer that grows with its content, submits on Enter, and crossfades its send button into a stop button while a reply streams. | `npx shadcn@latest add https://easeui.dev/r/prompt-input.json` |
| streaming-response | registry:component | Wraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list of suggested follow-up prompts. No card o… | `npx shadcn@latest add https://easeui.dev/r/streaming-response.json` |
| streaming-text | registry:component | Reveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's already on screen. | `npx shadcn@latest add https://easeui.dev/r/streaming-text.json` |
| todo-list | registry:component | A collapsible agent task plan with morphing status marks and a completion count. | `npx shadcn@latest add https://easeui.dev/r/todo-list.json` |
| tool-approval | registry:component | A card for an agent action waiting on approval, with Approve and Deny that collapse into a single status pill once resolved. | `npx shadcn@latest add https://easeui.dev/r/tool-approval.json` |
| tool-chip | registry:component | A small pill naming a tool an agent used, with a spinner, check, or error mark that crossfades in place as its status changes. | `npx shadcn@latest add https://easeui.dev/r/tool-chip.json` |

## For AI agents

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