Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item as Link
Clickable Item components rendered as anchor links with ChevronRight and ExternalLink icons using shadcn/ui Item with asChild pattern
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Input - Real-time Validation
A React password input with live real-time validation showing dynamic CheckCircle2 and X icons with color transitions as requirements are met using shadcn/ui Input
React Item in Dropdown
Item components within DropdownMenu displaying user selection list with avatars built using shadcn/ui Item, DropdownMenu, and Avatar