# Six Components That Make Interfaces Feel Alive By Jay Shah · 22 Jun 2026 · 4 min read · Design, UI, UX, Frontend, Craft Canonical: https://jshah.dev/design/2026/06/22/components-that-feel-alive/ Six live, interactive UI components I came across exploring popular UX libraries, and the small detail that makes each one feel good. Some apps just feel good to use. From my experience, that feeling rarely comes from one big feature. It comes from an accumulation of small details that show the people who built the app care about the user experience. I've been exploring popular UX libraries to find the components behind that feeling and capturing the ones I found most fun. Here are six of them, each one live in your browser, so feel free to click them, drag them, right-click them, and try to break them. Each follows the site's theme (flip the toggle up top) and is best on desktop. ## The command palette Hit `Cmd/Ctrl + K`, type a couple of letters, and jump anywhere or run any command without touching a menu. Apps like Raycast, Linear, Notion, and GitHub all have one. Once an app has more than a few dozen actions, it becomes much faster to type into a filtered list than to hunt through menus. The library most people reach for is [cmdk](https://github.com/pacocoursey/cmdk). > Each command shows its own keyboard shortcut, so over time you learn the faster keys and need the palette less and less. ## The sliding tab indicator The highlight pill slides under the active tab instead of blinking into place. iOS, macOS, and Vercel all do it. It's subtle enough that most people don't consciously notice it. However, I think small details like this are a big part of why these interfaces feel polished. In React, [Motion](https://motion.dev/docs/react-layout-animations)'s layout animations give you the same effect for free. > A single element moves under the tabs rather than separate highlights turning on and off. Because the same element travels, your eye can follow it across the gap. Keynote's Magic Move transition uses the same idea. ## The optimistic like button Tap the heart and it fills instantly, before the server has even responded. The request goes out in parallel, and if it succeeds there's nothing left to do because the UI is already showing the correct state. React even ships this as [`useOptimistic`](https://react.dev/reference/react/useOptimistic). > The part that's easy to forget is the rollback. Flip "fail next request" and watch the count revert to its previous value. Optimistic updates are a bet that the action will usually succeed, which is a safe bet for a like button but not for something like a bank transfer. ## Stacked toasts Toasts are the little confirmations that slide into the corner of the screen, like "Saved" or "Copied." [Sonner](https://sonner.emilkowal.ski/) is the best implementation I've seen, where toasts stack on top of each other and fan out when you hover. > Hovering pauses each toast's auto-dismiss timer, so the one you're reading never disappears mid-sentence. The timers resume when you leave. ## Drag to reorder Grab a row and the list rearranges under you: the others slide aside to open a slot, and the one you're holding drops into it. You see this pattern in Trello cards, playlist queues, and any settings page that lets you arrange your favorites in the order you want. [dnd-kit](https://dndkit.com/) is the React reference, handling sortable lists, keyboard dragging, and collision detection for you. > The row you're dragging is actually the easy part, since it just tracks the cursor. The hard part is animating the other rows. Reordering the list moves them instantly, with no animation, so the trick is FLIP: let the browser jump each one to its new slot, measure how far it travelled, snap it back with a transform, then release it so it animates across the gap instead of jumping. This is the same idea as the sliding tab indicator, applied to a whole list at once. ## The context menu Right-click a file and a menu appears under your cursor with the actions that fit it: rename, duplicate, move, delete. It brings the commands to whatever you're pointing at instead of sending you to a toolbar and back. Support for right-click menus is one of the details that makes a website feel more like a desktop app. [Radix](https://www.radix-ui.com/primitives/docs/components/context-menu) handles the positioning, focus, and submenus for you. > Right-clicking a file gives you a different menu than right-clicking the empty canvas, so the commands always describe whatever sits under the cursor. While this isn't an exhaustive list, these are the components that have stood out to me the most so far. I'll add more as I come across them.