diff --git a/apps/v4/components/directory-list.tsx b/apps/v4/components/directory-list.tsx new file mode 100644 index 0000000000..3ed8690432 --- /dev/null +++ b/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 ( + + {registries.map((registry, index) => ( + + + + + + {registry.name} + {registry.description && ( + {registry.description} + )} + + + + + + + {index < registries.length - 1 && } + + ))} + + ) +} diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx index 08166a2e2f..756ab2cbec 100644 --- a/apps/v4/components/docs-sidebar.tsx +++ b/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", diff --git a/apps/v4/components/mobile-nav.tsx b/apps/v4/components/mobile-nav.tsx index 5722d1bf82..630a417fe0 100644 --- a/apps/v4/components/mobile-nav.tsx +++ b/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", diff --git a/apps/v4/content/docs/(root)/directory.mdx b/apps/v4/content/docs/(root)/directory.mdx new file mode 100644 index 0000000000..e8f4239677 --- /dev/null +++ b/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 @/`. + + + +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. + +
+ +
Getting Started
+
+ Set up and build your own registry +
+ + + +
Authentication
+
+ Secure your registry with authentication +
+ + +
Namespaces
+
+ Configure registries with namespaces +
+ + +
Add a Registry
+
+ Learn how to add a registry to the directory +
+ + +
Examples
+
+ Registry item examples and configurations +
+ + +
Schema
+
+ Schema specification for registry.json +
+ +
diff --git a/apps/v4/content/docs/components/index.mdx b/apps/v4/content/docs/components/index.mdx index 0393eb8725..5ec86bc13c 100644 --- a/apps/v4/content/docs/components/index.mdx +++ b/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 --- + +--- + +Can't find what you need? Try the [registry directory](/docs/directory) for community-maintained components. diff --git a/apps/v4/content/docs/registry/registry-index.mdx b/apps/v4/content/docs/registry/registry-index.mdx index 8d83d41d81..87b3622e41 100644 --- a/apps/v4/content/docs/registry/registry-index.mdx +++ b/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. diff --git a/apps/v4/lib/config.ts b/apps/v4/lib/config.ts index effd47e250..c839863710 100644 --- a/apps/v4/lib/config.ts +++ b/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", diff --git a/apps/v4/mdx-components.tsx b/apps/v4/mdx-components.tsx index 66997c1458..93f0e55b3c 100644 --- a/apps/v4/mdx-components.tsx +++ b/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) => ( " + }, + { + "name": "@ai-elements", + "homepage": "https://ai-sdk.dev/elements", + "url": "https://registry.ai-sdk.dev/{name}.json", + "description": "Pre-built components like conversations, messages and more to help you build AI-native applications faster.", + "logo": "" + }, + { + "name": "@algolia", + "homepage": "https://sitesearch.algolia.com", + "url": "https://sitesearch.algolia.com/r/{name}.json", + "description": "Enterprises and developers use Algolia's AI search infrastructure to understand users and show them what they're looking for.", + "logo": "Algolia" + }, + { + "name": "@clerk", + "homepage": "https://clerk.com/docs/guides/development/shadcn-cli", + "url": "https://clerk.com/r/{name}.json", + "description": "The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and The Modern Web.", + "logo": "Clerk" + }, + { + "name": "@coss", + "homepage": "https://coss.com/ui", + "url": "https://coss.com/ui/r/{name}.json", + "description": "A new, modern UI component library built on top of Base UI. Built for developers and AI.", + "logo": "" + }, + { + "name": "@cult-ui", + "homepage": "https://www.cult-ui.com", + "url": "https://cult-ui.com/r/{name}.json", + "description": "Cult UI is a rare, curated set of shadcn-compatible, headless and composable components—tastefully animated with Framer Motion.", + "logo": "" + }, + { + "name": "@elevenlabs-ui", + "homepage": "https://ui.elevenlabs.io", + "url": "https://ui.elevenlabs.io/r/{name}.json", + "description": "A collection of Open Source agent and audio components that you can customize and extend.", + "logo": "ElevenLabs" + }, + { + "name": "@kibo-ui", + "homepage": "https://www.kibo-ui.com/", + "url": "https://www.kibo-ui.com/r/{name}.json", + "description": "Kibo UI is a custom registry of composable, accessible and open source components designed for use with shadcn/ui.", + "logo": "Kibo UI" + }, + { + "name": "@kokonutui", + "homepage": "https://kokonutui.com", + "url": "https://kokonutui.com/r/{name}.json", + "description": "Collection of stunning components built with Tailwind CSS, shadcn/ui and Motion to use on your websites.", + "logo": "" + }, + { + "name": "@motion-primitives", + "homepage": "https://www.motion-primitives.com", + "url": "https://motion-primitives.com/c/registry.json", + "description": "Beautifully designed motions components. Easy copy-paste. Customizable. Open Source. Built for engineers and designers.", + "logo": "" + }, + { + "name": "@nuqs", + "homepage": "https://nuqs.dev/registry", + "description": "Custom parsers, adapters and utilities from the community for type-safe URL state management.", + "url": "https://nuqs.dev/r/{name}.json", + "logo": "" + }, + { + "name": "@prompt-kit", + "homepage": "https://www.prompt-kit.com", + "url": "https://www.prompt-kit.com/c/registry.json", + "description": "Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces.", + "logo": "" + }, + { + "name": "@react-bits", + "homepage": "https://reactbits.dev", + "url": "https://reactbits.dev/r/{name}.json", + "description": "A large collection of animated, interactive & fully customizable React components for building memorable websites. From smooth text animations all the way to eye-catching backgrounds, you can find it here.", + "logo": "" + }, + { + "name": "@shadcnblocks", + "homepage": "https://shadcnblocks.com", + "url": "https://shadcnblocks.com/r/{name}.json", + "description": "A registry with hundreds of extra blocks for shadcn ui.", + "logo": "" + }, + { + "name": "@shadcndesign", + "homepage": "https://www.shadcndesign.com", + "url": "https://shadcndesign-free.vercel.app/r/{name}.json", + "description": "A growing collection of high-quality blocks and themes for shadcn/ui.", + "logo": "" + }, + { + "name": "@supabase", + "homepage": "https://supabase.com/ui", + "url": "https://supabase.com/ui/r/{name}.json", + "description": "A collection of React components and blocks built on the shadcn/ui library that connect your front-end to your Supabase back-end via a single command.", + "logo": "Supabase" + }, + { + "name": "@tailark", + "homepage": "https://tailark.com", + "url": "https://tailark.com/r/{name}.json", + "description": "Shadcn blocks designed for building modern marketing websites.", + "logo": "" + } +]