#Technology Tags

Workspace cards display technology tags — small labels with an icon and name that indicate the tech stack of an app or package. zpress ships with a curated map of 169 technologies that auto-resolve to the correct icon and display label.

#How it works

Add tag keys to the tags array on any workspace item:

packages: [
  {
    text: 'API',
    icon: 'devicon:hono',
    description: 'REST API with typed routes',
    tags: ['hono', 'typescript', 'postgresql'],
    docsPrefix: '/apps/api',
  },
]

Each tag key is looked up in the built-in tech map. A match renders the icon and display label (e.g., hono renders as Hono). Unrecognized tags render as plain text without an icon.

#Tag categories

Tags are organized into the following categories:

#Adding a new tag

Add an entry to the TECH_ICONS constant in packages/ui/src/theme/icons/tech-map.ts:

export const TECH_ICONS = {
  // ...existing entries
  'my-tech': { icon: 'simple-icons:mytech', label: 'My Tech' },
} as const satisfies Record<string, { readonly icon: string; readonly label: string }>

Then regenerate these docs:

lauf run docs

Prefer devicon for new entries — it provides colored brand logos for most technologies. Fall back to logos, vscode-icons, or material-icon-theme when devicon has no match, and simple-icons as a last resort (monochrome).