ItemLink() — ui Function Reference

Architecture documentation for the ItemLink() function in item-link.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemLink() — ui Function Reference

Dependency Diagram

graph TD
  fe89847a_5d11_6cf3_7b88_c046c8bac3e9["ItemLink()"]
  51f4700c_25f4_39e3_8f4f_c7477bf6a9e1["item-link.tsx"]
  fe89847a_5d11_6cf3_7b88_c046c8bac3e9 -->|defined in| 51f4700c_25f4_39e3_8f4f_c7477bf6a9e1
  style fe89847a_5d11_6cf3_7b88_c046c8bac3e9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/item-link.tsx lines 11–42

export default function ItemLink() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Item asChild>
        <a href="#">
          <ItemContent>
            <ItemTitle>Visit our documentation</ItemTitle>
            <ItemDescription>
              Learn how to get started with our components.
            </ItemDescription>
          </ItemContent>
          <ItemActions>
            <ChevronRightIcon className="size-4" />
          </ItemActions>
        </a>
      </Item>
      <Item variant="outline" asChild>
        <a href="#" target="_blank" rel="noopener noreferrer">
          <ItemContent>
            <ItemTitle>External resource</ItemTitle>
            <ItemDescription>
              Opens in a new tab with security attributes.
            </ItemDescription>
          </ItemContent>
          <ItemActions>
            <ExternalLinkIcon className="size-4" />
          </ItemActions>
        </a>
      </Item>
    </div>
  )
}