Learn 21 Advanced UI concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Chooses a continuous value along an upright track when vertical space matches the task.
Create an accessible vertical slider for volume or level. Use correct slider semantics, expose min, max, step and current value, support Arrow, Page Up, Page Down, Home and End keys, keep the orientation visually and programmatically vertical, provide a numeric alternative, and do not use it when precise entry is required.Selects one value from labeled discrete stops along a track.
Create an accessible stepped slider with five meaningful labeled stops. Snap only to valid values, announce the current label rather than an ambiguous number, support keyboard controls, keep tick labels readable at zoom, provide direct selection when the set is small, and do not imply intermediate values are available.Displays a month or schedule as a keyboard-navigable date grid.
Create an accessible month calendar with a visible month and year, previous, next and Today controls, a properly labeled date grid, one roving keyboard focus, selected and current-day states, localized week starts, unavailable dates, and an agenda alternative when events must be understood without a visual grid.Selects a year without requiring a month or day.
Create an accessible year picker for a bounded range. Provide direct keyboard entry, clear min and max years, decade navigation for the visual picker, a visible selected year, validation that preserves input, localization-safe display, and a plain numeric-input fallback.Inserts a linked person, team, or object after a trigger such as @.
Create an accessible mentions input where typing @ opens matching people. Use an ARIA combobox pattern, support keyboard selection and Escape, insert a non-ambiguous mention token, keep surrounding text editable, handle duplicate display names, announce result counts concisely, and preserve a plain-text representation for submission.Turns displayed content into an editable field in its current context.
Create an accessible inline edit for a project title. Provide a real Edit button rather than click-only text, replace the display with a labeled input, support Save, Cancel and Escape, retain focus predictably, validate without losing the value, indicate pending and failure states, and prevent accidental submission from unrelated forms.Lists selected files with progress, status, retry, cancel, and removal actions.
Create an accessible upload queue showing each file name, size, progress and outcome. Label retry, cancel and remove controls per file, announce meaningful status changes without every percentage tick, preserve completed items, handle duplicate files and validation failures, and allow keyboard users to manage the queue.Represents one choice as a rich card with a clear selected state.
Create a group of selectable plan cards using radio semantics for a single choice. Make the full card label clickable, preserve one clear selected and focus state, keep price and limitations readable, avoid nested interactive controls, support keyboard selection, and do not communicate selection by color alone.Organizes work cards in status columns that support movement and prioritization.
Create an accessible Kanban board with named columns, item counts and ordered cards. Support pointer drag plus equivalent keyboard move controls, announce pickup, target and final position, preserve focus, allow horizontal navigation without scroll trapping, persist changes only after a valid move, and provide a list or table alternative.Plots people, rooms, or equipment against a shared time axis.
Create an accessible resource scheduler with resources as labeled rows and time slots as columns. Provide an agenda or table alternative, keyboard navigation, localized time and zone context, visible availability and conflicts, zoom or range controls, stable focus while editing, and no status conveyed by color alone.Asks for a compact confirmation beside the action that triggered it.
Create an accessible confirmation popover anchored to a Delete button. Include a short consequence statement plus explicit Confirm and Cancel controls, move focus into the popover when opened, support Escape and outside dismissal when safe, return focus to the trigger, avoid a full-screen backdrop, and use a modal dialog instead for complex or high-risk decisions.Reorders a linear collection with pointer and keyboard interactions.
Create an accessible sortable list with dedicated drag handles and Move up, Move down keyboard actions. Announce the picked item and final position, preserve DOM order after commit, support Escape to cancel, keep auto-scroll restrained, maintain focus on the moved item, and save only after a valid reorder.Lets people adjust the width of a navigation or supporting pane.
Create a resizable sidebar with a visible separator handle using separator semantics, current value and min and max bounds. Support pointer drag plus arrow-key resizing, preserve readable main content, remember the preference, offer reset and collapse actions, prevent accidental text selection, and remain usable at high zoom.Refreshes current content after a deliberate downward pull at the top boundary.
Create pull-to-refresh as progressive enhancement for a mobile feed. Activate only when the scroll container is already at its top, show resistance and a threshold indicator, run one refresh at a time, retain a visible Refresh button alternative, announce loading and completion, preserve scroll position, and reduce overscroll motion when reduced motion is requested.Opens contextual actions after a sustained touch while retaining other input methods.
Create a long-press context menu for a mobile list item with an equally available visible or overflow-menu trigger. Use a documented press threshold with movement cancellation, provide immediate feedback, avoid conflicting with scrolling or text selection, support keyboard and pointer context-menu events, and anchor actions close to the item.Shows the current position within a small swipeable or paged sequence.
Create a page indicator for five swipeable onboarding screens. Expose the current page and total in accessible text, keep dots supplementary, make dots buttons only when direct navigation is supported, enlarge their hit targets, update after swipe completion, avoid excessive counts, and respect reduced-motion preferences.Lets touch users move between cards through horizontal swiping.
Create a swipeable card sequence with visible Previous and Next button alternatives. Use touch-action intentionally, preserve vertical page scrolling, apply distance and velocity thresholds, snap cancelled gestures back, expose current position, support keyboard navigation, avoid swipe-only destructive actions, and disable large travel under reduced motion.Keeps essential content and controls clear of notches, rounded corners, and home indicators.
Create a mobile page shell that uses env safe-area-inset values for fixed headers, bottom actions and full-bleed backgrounds. Keep essential controls inside the safe region, let decorative backgrounds extend edge to edge, combine insets with base spacing using max or calc, account for dynamic browser chrome, and test portrait and landscape orientations.Manages multiple open documents with active, dirty, close, and reorder states.
Create accessible editor tabs for multiple open files. Use tab semantics and roving keyboard focus, show active and unsaved states without color alone, provide a labeled close control per tab, choose a predictable neighbor after closing, support horizontal overflow and reordering, warn before discarding changes, and preserve the active document.Shows compact workspace context and quick status controls along an application edge.
Create a compact desktop status bar showing branch, sync state, cursor position and encoding. Group information logically, make actionable items real buttons with labels, keep passive text out of the tab order, update status without excessive announcements, preserve contrast at small sizes, and collapse lower-priority details on narrow windows.Moves a tool panel among docked edges or a floating workspace position.
Create a dockable desktop tool panel that can attach left, right or bottom and optionally float. Provide explicit keyboard-operable docking controls instead of drag alone, preserve panel state and focus, enforce sensible min sizes, prevent the panel from leaving the viewport, announce its new position, and restore a safe default layout.