sh4dcnv2 · atlas
← libraries

@easeui

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

50 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://easeui.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://easeui.dev/r/registry.json
bun bunx shadcn@latest add https://easeui.dev/r/registry.json
fetch registry curl -s https://easeui.dev/r/registry.json

Components

50 total
Accordion 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 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 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 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 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 component

Bordered surface with header, content, and footer parts for grouping related content.

npx shadcn@latest add https://easeui.dev/r/card.json
Checkbox 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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