Micro Interactions
Explore 113 interactive UI micro interactions for buttons, forms, selection controls, modals, navigation, and more. Preview each behavior and copy its implementation prompt with TypeUI Creative.
Inputs
Explore input micro interactions for password visibility, autosave, validation, formatting, character counts, and suggestions. Build forms that help users enter and correct information.
Reveal toggle
Copy confirm
Prefix reveal
Suffix fade
Selection
Explore checkbox, toggle, and radio micro interactions that reveal settings, update totals, filter results, and enable actions. Preview how each choice changes the interface.
Select items to begin
Reveal contextual actions
Total 100
Recalculate derived value
0 selected
Select-all cascade
Animate completed item
Modals
Explore modal micro interactions for confirmation, validation, drag dismissal, and unsaved changes. Help users complete focused tasks while preserving their work and keyboard focus.
Drag down to dismiss
Backdrop-click nudge
Error shake
Confirm completed action
Drawers
Explore drawer and bottom-sheet micro interactions for edge gestures, linked backdrops, and expanding panels. Try pointer controls and keyboard alternatives.
Edge swipe open
Drag-linked backdrop
Open to see details
Expand shared surface
Collapse persistent panel
Tooltips
Explore tooltip and hover-card micro interactions for useful context, link previews, and shared hover delays. Keep supporting information accessible to mouse and keyboard users.
Shipped by two hours ago
Hover card
Preview the details in , with every duration and curve.
Link preview
Hover, focus, or tap
Warm delay group
Toasts
Explore toast micro interactions for undo actions, asynchronous results, and swipe dismissal. Give users clear feedback and a way to recover from a change.
Undo countdown toast
Promise toast morph
Swipe to dismiss toast
Lists
Explore list micro interactions for reordering, pinning, archiving, inserting, and previewing items. Keep changes understandable without losing the user’s place.
A hardcoded max-height eases wrongly and breaks the moment content changes.
Accordion
In progress
Done
Select an item to move
Move between groups
- 1Ingest
- 2Transform
- 3Validate
- 4Publish
Drag to reorder
Items0 pinned
Item 1
Item 2
Item 3
Pin item to top
Sliders
Explore slider micro interactions for range selection, snap points, tooltips, scrubbing, and before-and-after comparisons. Try precise pointer and keyboard feedback.
Drag thumb
Stepped snap
Drag or use arrow keys
Tooltip thumb
Tick highlights
Cards
Explore card micro interactions for expanding details, flipping content, revealing actions, swiping, and shared-element transitions. Give each interaction a clear purpose and result.
Flip card
Expandable
Sample card
Card not saved.Hover, focus, or tap
Action reveal
1 of 4Card 1