ItemLink() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ItemLink() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/item-link.tsx lines 10–41

export 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>
  )
}