Added Registry Directory

apps/v4/components/registry/AddRegistryModal.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { DirectoryRegistry } from "@/lib/directory-registry"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+
+interface Props {
+  open: boolean
+  registry: DirectoryRegistry
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+}>()
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="dialog-ring animate-none! rounded-xl sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Add Registry</DialogTitle>
+        <DialogDescription>
+          Run this command to add {{ registry.name }} to your project.
+        </DialogDescription>
+      </DialogHeader>
+      <ProsePre
+        v-if="registry.command"
+        :code="registry?.command"
+        language="bash"
+      />
+      <DialogFooter>
+        <DialogClose as-child>
+          <Button variant="outline">
+            Cancel
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

apps/v4/components/registry/RegistryList.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { DirectoryRegistry } from "~/lib/directory-registry"
+import { IconArrowUpRight } from "@tabler/icons-vue"
+import { PlusIcon, Search, X } from "lucide-vue-next"
+import { directoryRegistryList } from "~/lib/directory-registry"
+import { Button } from "~/registry/new-york-v4/ui/button"
+import { Field } from "~/registry/new-york-v4/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "~/registry/new-york-v4/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "~/registry/new-york-v4/ui/item"
+import AddRegistryModal from "./AddRegistryModal.vue"
+
+const searchQuery = ref("")
+const addRegistryOpen = ref(false)
+const selectedRegistry = ref<DirectoryRegistry | null>(null)
+
+const registryList = computed(() => {
+  return directoryRegistryList.filter((r) => {
+    return r.name.includes(searchQuery.value) || r.description.includes(searchQuery.value)
+  })
+})
+function toggleAddRegistryModal(registry: DirectoryRegistry | null) {
+  selectedRegistry.value = registry
+  addRegistryOpen.value = !addRegistryOpen.value
+}
+</script>
+
+<template>
+  <div class="mt-6">
+    <Field>
+      <InputGroup>
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+        <InputGroupInput v-model="searchQuery" placeholder="search" />
+        <InputGroupAddon align="inline-end">
+          <span class="text-muted-foreground tabular-nums sm:text-xs">
+            {{ directoryRegistryList.length }}
+            {{ directoryRegistryList.length === 1 ? "Registry" : "Registries" }}
+          </span>
+        </InputGroupAddon>
+        <InputGroupAddon
+          align="inline-end"
+          :data-disabled="false"
+          class-name="data-[disabled=true]:hidden"
+        >
+          <InputGroupButton
+            aria-label="Clear"
+            title="Clear"
+            size="icon-xs"
+          >
+            <X />
+          </InputGroupButton>
+        </inputgroupaddon>
+      </InputGroup>
+    </Field>
+    <ItemGroup>
+      <template v-for="registry in registryList" :key="registry.name">
+        <Item class="group/item relative gap-6 px-0">
+          <ItemMedia
+            variant="image"
+            class="*:[svg]:fill-foreground grayscale *:[svg]:size-8"
+          >
+            <span v-if="registry.logo.startsWith('<svg')" v-html="registry.logo" />
+            <NuxtImg v-else :src="registry.logo" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>
+              <a
+                :href="registry.link"
+                rel="noopener noreferrer external"
+                class="group flex items-center gap-1"
+                target="_blank"
+              >
+                {{ registry.name }}
+                <IconArrowUpRight
+                  class="size-4 opacity-0 group-hover:opacity-100"
+                />
+              </a>
+            </ItemTitle>
+            <ItemDescription v-if="registry.description" class="text-pretty">
+              {{ registry.description }}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions class="">
+            <Button v-if="registry.command" variant="outline" @click.prevent="toggleAddRegistryModal(registry)">
+              <PlusIcon />
+              Add
+            </Button>
+            <Button as="a" :href="registry.link" target="_blank" size="sm" variant="outline">
+              View <IconArrowUpRight />
+            </Button>
+          </ItemActions>
+          <ItemFooter class="justify-start pl-16 sm:hidden">
+            <Button as="a" :href="registry.link" target="_blank" size="sm" variant="outline">
+              View <IconArrowUpRight />
+            </Button>
+          </ItemFooter>
+        </Item>
+        <ItemSeparator />
+      </template>
+    </ItemGroup>
+    <AddRegistryModal v-if="selectedRegistry" :open="addRegistryOpen" :registry="selectedRegistry" @update:open="toggleAddRegistryModal(null)" />
+  </div>
+</template>

apps/v4/content/docs/directory.md

@@ -0,0 +1,19 @@
+---
+title: Registry Directory
+description: Discover community registries for shadcn/ui components and blocks.
+---
+
+These registries are built into the CLI with no additional configuration required. To add a component, run:
+
+```bash
+npx shadcn-vue add @<registry>/<component>.
+```
+
+<Callout variant="warning" icon class="gap-2! border-amber-200 bg-amber-50 p-2 font-semibold dark:border-amber-900 dark:bg-amber-950 *:[svg]:translate-y-1">
+Community registries are maintained by third-party developers and are not officially curated. Always review code on installation to ensure it meets your security and quality standards.
+
+</Callout>
+
+Don't see a registry? [Learn how to add it here.](/docs/registry)
+
+<RegistryList />

apps/v4/lib/config.ts

@@ -25,6 +25,14 @@ export const siteConfig = {
       href: '/charts/area',
       label: 'Charts',
     },
+    {
+      href: '/docs/directory',
+      label: 'Directory',
+    },
+    {
+      href: '/themes',
+      label: 'Themes',
+    },
     {
       href: '/colors',
       label: 'Colors',

apps/v4/lib/directory-registry.ts

@@ -0,0 +1,10 @@
+export interface DirectoryRegistry {
+  name: string
+  description: string
+  link: string
+  command?: string
+  logo: string
+}
+import directoryJson from '@/registry/directory.json'
+
+export const directoryRegistryList: DirectoryRegistry[] = [...directoryJson]

apps/v4/registry/directory.json

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Insipira UI",
+    "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.",
+    "link": "https://inspira-ui.com/docs/en",
+    "logo": "https://cdn.inspira-ui.com/logo-dark.svg"
+  },
+  {
+    "name": "Stunning UI",
+    "description": "Create Stunning Websites That Stand Out",
+    "link": "https://www.stunningui.com/",
+    "logo": "https://robertshaw.id/assets/stunning-ui.svg"
+  },
+
+  {
+    "name": "Mapcn",
+    "description": "Beautiful maps,made simple.",
+    "link": "https://mapcn-vue.geoql.in/",
+    "logo": "https://raw.githubusercontent.com/geoql/v-maplibre/refs/heads/main/apps/mapcn-vue/public/favicon.svg",
+    "command": "npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map"
+  }
+]

apps/v4/registry/new-york-v4/ui/carousel/CarouselContent.vue

@@ -8,23 +8,20 @@ defineOptions({
 })
 
 const props = defineProps<WithClassAsProps>()
-
+// @ts-expect-error Skip this when building since its a neede var
 const { carouselRef, orientation } = useCarousel()
 </script>
 
 <template>
-  <div
-    ref="carouselRef"
-    data-slot="carousel-content"
-    class="overflow-hidden"
-  >
+  <div ref="carouselRef" data-slot="carousel-content" class="overflow-hidden">
     <div
       :class="
         cn(
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           props.class,
-        )"
+        )
+      "
       v-bind="$attrs"
     >
       <slot />