jshah
← Index
Design · UI · UX · Frontend

Six Components That Make Interfaces Feel Alive

Jay Shah 22 Jun 2026 3 min read

Some apps just feel good to use. It’s rarely one big feature; it’s the accumulation of small, considered details that quietly signal the people who built it have their stuff together. 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. Click them, drag them, right-click them, 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. Raycast, Linear, Notion, and GitHub all run on it. Past a few dozen actions, a list you type into beats a menu you hunt through. The library most people reach for is cmdk.

The neat part: each command shows its own keyboard shortcut, so the palette quietly teaches you the faster keys and eventually graduates you off itself.

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 never consciously notice, which is exactly why it’s worth studying. In React, Motion’s layout animations give you the same effect for free.

The neat part: it's one element that moves, never four highlights blinking on and off. Because the same element travels, your eye follows it across the gap. Same trick as Keynote's Magic Move.

The optimistic like button

Tap the heart and it fills instantly, before the server says a word. The request goes out in parallel; if it succeeds there’s nothing to do, because the screen already matched the truth. React even ships this as useOptimistic.

The neat part: the unglamorous half is the rollback. Flip "fail next request" and watch the count revert and the button flinch. You're betting the action usually succeeds, which is true for likes and false for bank transfers.

Stacked toasts

The little confirmation that slides into a corner: “Saved,” “Copied,” “Sent.” Sonner is the version worth studying, where toasts deck on top of each other and fan out when you hover.

The neat part: 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. Trello cards, playlist queues, priority lists, every settings page that lets you pin your favorites in the order you want. dnd-kit is the React reference, handling sortable lists, keyboard dragging, and collision detection for you.

The neat part: the hard part isn't the row you're dragging; that just tracks the cursor. It's the others. 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 so it glides the gap instead of teleporting. The same idea as the sliding tab, run on 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. It’s the gesture that quietly separates a web page from an app. Radix handles the positioning, focus, and submenus for you.

The neat part: right-click a file versus the empty canvas and you get different menus; the commands always describe whatever sits under the cursor.

That’s the set for now. I’ll add more as I come across them.

// END

Next The AI Headcount Equation