Item

Item is a composition pattern used across menus, dropdowns, command palettes, select options, and lists. It provides consistent structure and styling for any list-like interface element, ensuring visual harmony across different contexts.

Yes! Items commonly include leading icons to provide visual context. For example, file type icons in file lists, action icons in menus, or status icons in notifications. Icons help users quickly scan and identify items.

Items can display keyboard shortcuts on the right side, especially in menus and command palettes. This helps users learn shortcuts while browsing options, gradually transitioning to keyboard-first workflows for efficiency.

Yes, disabled Items appear muted and aren't interactive. Use disabled states for unavailable options (like "Cut" when nothing is selected) rather than hiding items, which helps users understand full functionality even when temporarily unavailable.

Selected Items show active states in select menus, radio groups, or navigation. They use distinct styling (background color, checkmark) to clearly indicate the current selection or active page, providing essential feedback to users.

Yes, this Figma Item component matches the shadcn/ui implementation, ensuring your list items, menu options, and selectable elements maintain consistent structure and behavior throughout your application.