{
  "name": "icon-tile",
  "title": "Icon Tile",
  "description": "A soft-tinted plate that seats one icon · the little station crest that tells you what a step does before you read it.",
  "category": "data-display",
  "install": {
    "command": "npx shadcn@latest add @clow/icon-tile",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "tint": {
      "type": "select",
      "options": [
        "neutral",
        "accent",
        "success",
        "warning",
        "violet"
      ],
      "default": "neutral",
      "description": "Semantic wash behind the icon. violet is derived live from theme tokens, never a hardcoded hue."
    },
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md",
      "description": "sm 28px, md 36px, lg 44px · icon scales with the plate."
    }
  },
  "agent": {
    "prompt": "Use IconTile to seat exactly one iconsax icon on a soft tinted plate · inside WorkflowStep, at the head of a list row, or on a feature chip. The child is the icon itself with color=\"currentColor\" and no size prop; the tile sizes and tints it. Pick tint by meaning (accent for the brand moment, success/warning for state, violet for a secondary flavor, neutral otherwise) · decoration only, so vary tints across a set for scanability. It is not a button: wrap it in one if it must be clickable.",
    "examples": [
      "<IconTile tint=\"accent\"><Radar color=\"currentColor\" /></IconTile>",
      "<IconTile tint=\"violet\" size=\"sm\"><DocumentText color=\"currentColor\" /></IconTile>",
      "<IconTile size=\"lg\"><ArchiveTick color=\"currentColor\" /></IconTile>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/icon-tile",
    "markdown": "https://clow.cards/llms/icon-tile.md",
    "registryItem": "https://clow.cards/r/icon-tile.json"
  }
}
prop	type	default
tint	neutral \| accent \| success \| warning \| violet	neutral
size	sm \| md \| lg	md
Draw

Playground

Examples

Props
