feat: add registry directory (#8574)

* feat: add registry directory

* fix: lint

* feat: add more registries

* feat: add nuqs to directory

* feat: add shadcndesign

* feat: add more registries

* feat: add new registries

* chore: remove hooks

apps/v4/components/directory-list.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { IconArrowUpRight } from "@tabler/icons-react"
+
+import registries from "@/registry/directory.json"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@/registry/new-york-v4/ui/item"
+
+export function DirectoryList() {
+  return (
+    <ItemGroup className="my-8">
+      {registries.map((registry, index) => (
+        <React.Fragment key={index}>
+          <Item className="gap-6" asChild>
+            <a
+              href={registry.homepage}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Visit ${registry.name}`}
+            >
+              <ItemMedia
+                variant="image"
+                dangerouslySetInnerHTML={{ __html: registry.logo }}
+                className="*:[svg]:fill-foreground grayscale *:[svg]:size-8"
+              />
+              <ItemContent>
+                <ItemTitle>{registry.name}</ItemTitle>
+                {registry.description && (
+                  <ItemDescription>{registry.description}</ItemDescription>
+                )}
+              </ItemContent>
+              <ItemActions className="self-start">
+                <IconArrowUpRight className="size-4" />
+              </ItemActions>
+            </a>
+          </Item>
+          {index < registries.length - 1 && <ItemSeparator className="my-1" />}
+        </React.Fragment>
+      ))}
+    </ItemGroup>
+  )
+}

apps/v4/components/docs-sidebar.tsx

@@ -24,8 +24,8 @@ const TOP_LEVEL_SECTIONS = [
     href: "/docs/components",
   },
   {
-    name: "Registry",
-    href: "/docs/registry",
+    name: "Directory",
+    href: "/docs/directory",
   },
   {
     name: "MCP Server",

apps/v4/components/mobile-nav.tsx

@@ -22,8 +22,8 @@ const TOP_LEVEL_SECTIONS = [
     href: "/docs/components",
   },
   {
-    name: "Registry",
-    href: "/docs/registry",
+    name: "Directory",
+    href: "/docs/directory",
   },
   {
     name: "MCP Server",

apps/v4/content/docs/(root)/directory.mdx

@@ -0,0 +1,69 @@
+---
+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: `npx shadcn add @<registry>/<component>`.
+
+<DirectoryList />
+
+Don't see a registry? Learn how to [add it here](/docs/registry/registry-index).
+
+## Documentation
+
+You can use the `shadcn` CLI to run your own code registry. Running your own registry allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.
+
+<div className="mt-6 grid gap-4 sm:grid-cols-2">
+  <LinkedCard href="/docs/registry/getting-started" className="items-start text-sm md:p-6">
+    <div className="font-medium">Getting Started</div>
+    <div className="text-muted-foreground">
+      Set up and build your own registry
+    </div>
+  </LinkedCard>
+
+<LinkedCard
+  href="/docs/registry/authentication"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Authentication</div>
+  <div className="text-muted-foreground">
+    Secure your registry with authentication
+  </div>
+</LinkedCard>
+<LinkedCard
+  href="/docs/registry/namespace"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Namespaces</div>
+  <div className="text-muted-foreground">
+    Configure registries with namespaces
+  </div>
+</LinkedCard>
+<LinkedCard
+  href="/docs/registry/registry-index"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Add a Registry</div>
+  <div className="text-muted-foreground">
+    Learn how to add a registry to the directory
+  </div>
+</LinkedCard>
+<LinkedCard
+  href="/docs/registry/examples"
+  className="items-start text-sm md:p-6"
+>
+  <div className="font-medium">Examples</div>
+  <div className="text-muted-foreground">
+    Registry item examples and configurations
+  </div>
+</LinkedCard>
+  <LinkedCard
+    href="/docs/registry/registry-json"
+    className="items-start text-sm md:p-6"
+  >
+    <div className="font-medium">Schema</div>
+    <div className="text-muted-foreground">
+      Schema specification for registry.json
+    </div>
+  </LinkedCard>
+</div>

apps/v4/content/docs/components/index.mdx

@@ -4,3 +4,7 @@ description: Here you can find all the components available in the library. We a
 ---
 
 <ComponentsList />
+
+---
+
+Can't find what you need? Try the [registry directory](/docs/directory) for community-maintained components.

apps/v4/content/docs/registry/registry-index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Index
+title: Add a Registry
 description: Open Source Registry Index
 ---
 
@@ -11,16 +11,9 @@ You can see the full list at [https://ui.shadcn.com/r/registries.json](https://u
 
 ## Adding a Registry
 
-You can submit a PR to add a registry to the index by adding it to the [registries.json](https://github.com/shadcn-ui/ui/blob/main/apps/v4/public/r/registries.json) file.
+You can open an issue to add a registry to the index by filling out the [registry directory issue template](https://github.com/shadcn-ui/ui/issues/new?template=registry_directory.yml).
 
-Here's an example of how to add a registry to the index:
-
-```json title="registries.json" showLineNumbers
-{
-  "@acme": "https://registry.acme.com/r/{name}.json",
-  "@example": "https://example.com/r/{name}"
-}
-```
+Once you have submitted your issue, it will be validated and reviewed by the team.
 
 ### Requirements
 
@@ -65,15 +58,3 @@ Here's an example of a valid registry:
   ]
 }
 ```
-
-### Validation
-
-At the root of the `shadcn/ui` project, you can run the following command to validate the `registries.json` file.
-
-```bash
-pnpm validate:registries
-```
-
-This will validate the registries.json file and output any errors.
-
-Once you have submitted your PR, it will be validated and reviewed by the team.

apps/v4/lib/config.ts

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

apps/v4/mdx-components.tsx

@@ -11,6 +11,7 @@ import { ComponentPreview } from "@/components/component-preview"
 import { ComponentSource } from "@/components/component-source"
 import { ComponentsList } from "@/components/components-list"
 import { CopyButton } from "@/components/copy-button"
+import { DirectoryList } from "@/components/directory-list"
 import { getIconForLanguageExtension } from "@/components/icons"
 import {
   Accordion,
@@ -344,6 +345,7 @@ export const mdxComponents = {
   ComponentSource,
   CodeCollapsibleWrapper,
   ComponentsList,
+  DirectoryList,
   Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn("font-medium underline underline-offset-4", className)}

apps/v4/next.config.mjs

@@ -72,6 +72,11 @@ const nextConfig = {
         destination: "/docs/mcp",
         permanent: false,
       },
+      {
+        source: "/directory",
+        destination: "/docs/directory",
+        permanent: false,
+      },
     ]
   },
   rewrites() {

apps/v4/public/r/registries.json

@@ -57,15 +57,8 @@
   "@tweakcn": "https://tweakcn.com/r/themes/{name}.json",
   "@wds": "https://wds-shadcn-registry.netlify.app/r/{name}.json",
   "@wandry-ui": "https://ui.wandry.com.ua/r/{name}.json",
-  "@97cn": "https://97cn.itzik.co/r/{name}.json",
   "@pixelact-ui": "https://www.pixelactui.com/r/{name}.json",
-  "@better-upload": "https://better-upload.com/r/{name}.json",
   "@zippystarter": "https://zippystarter.com/r/{name}.json",
-  "@elevenlabs-ui": "https://ui.elevenlabs.io/r/{name}.json",
-  "@eldoraui": "https://eldoraui.site/r/{name}.json",
-  "@intentui": "https://intentui.com/r/{name}",
-  "@shadcn-map": "http://shadcn-map.vercel.app/r/{name}.json",
-  "@fancy": "https://fancycomponents.dev/r/{name}.json",
   "@shadcndesign": "https://shadcndesign-free.vercel.app/r/{name}.json",
   "@ha-components": "https://hacomponents.keshuac.com/r/{name}.json",
   "@shadix-ui": "https://shadix-ui.vercel.app/r/{name}.json"