component
Ecosystem mark
A package manager as a two-letter mono tile, told apart by corner shape rather than brand color.
Package ecosystems are told apart by the corner shape of a two-letter tile, not by brand colors, so they read at 20px and in grayscale. Six ecosystems are built in: npm, NuGet, winget, Chocolatey, Scoop and Homebrew. with-label shows the name beside the tile, and disabled dashes it for "not available yet".
wingetScoop · soon
<script setup lang="ts">
const ecosystems = ['npm', 'nuget', 'winget', 'chocolatey', 'scoop', 'homebrew'] as const
</script>
<template>
<div class="flex flex-col gap-3">
<div class="flex items-center gap-3">
<ZEcosystemMark v-for="e in ecosystems" :key="e" :ecosystem="e" size="md" />
</div>
<div class="flex items-center gap-4 flex-wrap">
<ZEcosystemMark ecosystem="winget" with-label />
<ZEcosystemMark ecosystem="scoop" with-label disabled />
</div>
</div>
</template>Other ecosystems
Any other ecosystem is drawn from label, monogram and shape (square, circle, leaf, arch, lens, drop or rounded). Without them, the name is used.
Cargopypi
<template>
<div class="flex items-center gap-4">
<ZEcosystemMark ecosystem="cargo" label="Cargo" monogram="rs" shape="lens" size="lg" with-label />
<ZEcosystemMark ecosystem="pypi" size="lg" with-label />
</div>
</template>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ecosystemrequired | "npm" | "nuget" | "winget" | "chocolatey" | "scoop" | "homebrew" | (string & {}) | — | — |
| disabled | boolean | false | — |
| disabledNote | string | "soon" | said after the label when disabled: "npm · soon" |
| label | string | — | override, or define an ecosystem the layer does not know |
| monogram | string | — | — |
| shape | "square" | "circle" | "leaf" | "arch" | "lens" | "drop" | "rounded" | — | — |
| size | "sm" | "md" | "lg" | "sm" | — |
| withLabel | boolean | false | — |