Shadcn.io is not affiliated with official shadcn/ui
Item as Link
Clickable Item components rendered as anchor links with ChevronRight and ExternalLink icons using shadcn/ui Item with asChild pattern
List items often need to be clickable links—navigation to details pages or external resources. This React pattern uses Item with asChild prop rendering anchor tags, ChevronRightIcon for internal navigation, ExternalLinkIcon with target blank and rel noopener noreferrer for external links—semantic HTML with proper link attributes. Built with shadcn/ui Item components and Lucide React icons, it's perfect for navigation lists, resource directories, settings menus, documentation links, or any list where items navigate to destinations requiring accessible keyboard-friendly clickable items.
Item as Link preview
Installation
Related Components
Item Sizes
Item sizing variations
Item Group
Grouped items with separators
Link Button
Button styled as link
Item in Dropdown
Item within dropdown menu
Navigation Link
Nav link patterns
Standard Card
Card component patterns
FAQ
Was this page helpful?
Sign in to leave feedback.
Different Length OTP Variants
React OTP inputs showing 4-digit, 6-digit, and 8-digit length variations with different grouping patterns built with shadcn/ui InputOTP
Item in Dropdown
Item components within DropdownMenu displaying user selection list with avatars built using shadcn/ui Item, DropdownMenu, and Avatar