1 files changed, 26 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue
new file mode 100644
index 00000000000..529a7893dfc
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue
@@ -0,0 +1,26 @@
+<script>
+import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
+import { PACKAGE_TYPES } from '~/packages/list/constants';
+
+export default {
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+  },
+  PACKAGE_TYPES,
+};
+</script>
+
+<template>
+  <gl-filtered-search-token v-bind="{ ...$attrs }" v-on="$listeners">
+    <template #suggestions>
+      <gl-filtered-search-suggestion
+        v-for="(type, index) in $options.PACKAGE_TYPES"
+        :key="index"
+        :value="type.type"
+      >
+        {{ type.title }}
+      </gl-filtered-search-suggestion>
+    </template>
+  </gl-filtered-search-token>
+</template>