ItemVariant() — ui Function Reference

Architecture documentation for the ItemVariant() function in item-variant.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemVariant() — ui Function Reference

Dependency Diagram

graph TD
  75e7328c_0c9d_e9a8_be0b_b755d4391c01["ItemVariant()"]
  6c2dc171_4210_4730_4f09_c68bc24612a4["item-variant.tsx"]
  75e7328c_0c9d_e9a8_be0b_b755d4391c01 -->|defined in| 6c2dc171_4210_4730_4f09_c68bc24612a4
  style 75e7328c_0c9d_e9a8_be0b_b755d4391c01 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/item-variant.tsx lines 10–54

export default function ItemVariant() {
  return (
    <div className="flex flex-col gap-6">
      <Item>
        <ItemContent>
          <ItemTitle>Default Variant</ItemTitle>
          <ItemDescription>
            Standard styling with subtle background and borders.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Open
          </Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Outline Variant</ItemTitle>
          <ItemDescription>
            Outlined style with clear borders and transparent background.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Open
          </Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Muted Variant</ItemTitle>
          <ItemDescription>
            Subdued appearance with muted colors for secondary content.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Open
          </Button>
        </ItemActions>
      </Item>
    </div>
  )
}