Dev Design Library

EaseUI components

easeUI is a set of React components with smooth easing and spring animations. Add them to your project as source files with the shadcn CLI.

Components
54
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
4
Source
https://github.com/rjcuff/easeui
Website
https://easeui.dev
Install
npx shadcn@latest add @easeui/{name}

All EaseUI components

  • Accordion: Expanding sections that grow to their natural height with no measuring, with arrow key navigation and closed panels skipped by Tab.
  • Agent Loading States: Three loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
  • Alert: Banner with a colored accent stripe. Body text stays neutral so contrast never depends on the variant.
  • Avatar: Round avatar in three sizes with an optional status dot. The image fades in on load and falls back to initials, and a group stacks them…
  • Badge: Small status pill in five colors, with a crossfade for when its variant changes.
  • Button: Button with a quick press, hairline rings instead of borders, four variants, and a 44px tap area even at small sizes.
  • Card: Bordered surface with header, content, and footer parts for grouping related content.
  • Checkbox: Checkbox on a real checkbox input, with a check mark that pops in rather than just appearing.
  • Code Block: A code block with a label, a copy button, and light coloring for keywords, strings, comments and numbers, with no highlighter dependency.
  • Command Palette: Command-K style search overlay that filters as you type, with arrow keys to move the highlight and Enter to select.
  • Copy Button: Copies text to the clipboard and trades its icon for a check for a moment, with a label or as a single icon.
  • Diff View: 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.
  • Drawer: Sheet that slides up from the bottom edge on the native dialog element. Drag the handle down, or flick it, to dismiss.
  • Dropdown Menu: Action menu that opens from a trigger, flips upward when there is no room below, and supports a destructive item.
  • Dynamic Island: A pill that morphs between a compact status line and any number of named live-activity views, the same element reshaping via layout…
  • Expandable Tabs: A row of icon tabs where the selected one expands to reveal its label, sliding a shared background pill to match.
  • File Upload: Dropzone that also opens the native file picker, with a list below it that pops each file in and collapses smoothly on remove.
  • Flowchart: 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…
  • Gradient Text: Text filled with a slowly drifting rainbow. It pauses while off screen and holds still when reduced motion is on.
  • Hold To Confirm: Button for destructive actions that fills while you hold it and only fires once the fill completes. Letting go early drains it back quickly.
  • Input: Text input whose focus ring grows from a hairline to two px, with a destructive ring for aria-invalid.
  • Insight Card: 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.
  • Message Bubble: A focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on arrival.
  • Modal: Centered dialog on the native dialog element that fades and scales in, leaves faster than it arrives, and keeps focus inside while open.
  • Morphing Search: 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…
  • Notification Stack: A deck of notification cards: collapsed to the top card with peeking edges behind it, fanning into a readable list on hover or focus.
  • Number Ticker: Number that rolls to a new value like an odometer, one changed digit at a time.
  • Otp Input: One box per digit for a verification code, with paste and SMS autofill support and a shake for a wrong code.
  • Pixel Loader: A 3x3 grid of cells that twinkle on independent, randomized cycles, paired with a shimmering label and an optional live elapsed timer.
  • Popover: A panel of arbitrary content anchored to a trigger, opening on click and flipping above it when there's no room below.
  • Progress: Progress bar that fills with scale instead of width, plus an indeterminate state for unknown durations.
  • Prompt Input: A chat composer that grows with its content, submits on Enter, and crossfades its send button into a stop button while a reply streams.
  • Pull To Refresh: A pull-down gesture over scrollable content: the indicator tracks the finger 1:1, then resists past the trigger distance and spins while…
  • Range Slider: Native range input with a filled track and tick dots, so keyboard and screen reader support come built in.
  • Rating: A row of stars that previews the score on hover, fills up to the pick in a quick wave, and moves one star at a time with the arrow keys.
  • Reasoning Disclosure
  • Select: Composable select whose menu fades and scales out of the trigger, and opens upward when there is no room below.
  • Selection Actions: A floating bar of bulk actions that fades and rises in once a selection leaves zero, for pairing with Table or any selectable list.
  • Skeleton: Loading placeholder with one shimmer shared across the page. Wrap real content and it takes the same shape, then crossfades away.
  • Stepper: Numbered steps joined by a line that fills as you move forward. Finished steps trade their number for a check and can be clicked to go back.
  • Streaming Response: Wraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list of suggested…
  • Streaming Text: Reveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's already on screen.
  • Switch: On and off switch with a quick slide and no bounce. Inside a label, the whole row is the tap target.
  • Table: A plain, composable data table: sortable headers with an arrow that only shows on hover until active, and rows that tint when selected.
  • Tabs: Pill, segment, or underline tabs with an indicator that slides to the selected tab.
  • Tag Input: A field that turns what you type into tags. Enter or a comma adds one, Backspace marks then removes the last, and a duplicate shakes the…
  • Text Animation: 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…
  • Textarea: Textarea that grows with its content instead of scrolling, down to three rows and up to a scrollable cap.
  • Theme Toggle: Light and dark switch that reveals the new theme as a circle growing from the center of the screen or from the button itself.
  • Toast: Toasts that stay long enough to read based on their word count, and pause while hovered or while the tab is in the background.
  • Todo List: A collapsible agent task plan with morphing status marks and a completion count.
  • Tool Approval: A card for an agent action waiting on approval, with Approve and Deny that collapse into a single status pill once resolved.
  • Tool Chip: A small pill naming a tool an agent used, with a spinner, check, or error mark that crossfades in place as its status changes.
  • Tooltip: Tooltip that shows a label with its keyboard shortcut, using Command on Mac and Ctrl elsewhere. Moving along a toolbar crossfades to the…

Browse by category