ItemExample() — ui Function Reference

Architecture documentation for the ItemExample() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemExample() — ui Function Reference

Dependency Diagram

graph TD
  2b969b02_820d_0fea_9839_45374ddb6977["ItemExample()"]
  7019dfd7_73aa_c7b5_4065_6d3efa35f26a["preview.tsx"]
  2b969b02_820d_0fea_9839_45374ddb6977 -->|defined in| 7019dfd7_73aa_c7b5_4065_6d3efa35f26a
  style 2b969b02_820d_0fea_9839_45374ddb6977 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/preview.tsx lines 1540–1576

function ItemExample() {
  return (
    <Example title="Item">
      <div className="flex w-full max-w-md flex-col gap-6">
        <Item variant="outline">
          <ItemContent>
            <ItemTitle>Two-factor authentication</ItemTitle>
            <ItemDescription className="text-pretty xl:hidden 2xl:block">
              Verify via email or phone number.
            </ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button size="sm" variant="secondary">
              Enable
            </Button>
          </ItemActions>
        </Item>
        <Item variant="outline" size="sm" asChild>
          <a href="#">
            <ItemMedia variant="icon">
              <IconPlaceholder
                lucide="ShoppingBagIcon"
                tabler="IconShoppingBag"
                hugeicons="ShoppingBasket01Icon"
                phosphor="BagIcon"
                remixicon="RiShoppingBagLine"
              />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Your order has been shipped.</ItemTitle>
            </ItemContent>
          </a>
        </Item>
      </div>
    </Example>
  )
}