|
| 1 | +--- |
| 2 | +title: Registry |
| 3 | +description: Run your own code registry. |
| 4 | +--- |
| 5 | + |
| 6 | +import { Callout } from '@docs/components/callout'; |
| 7 | +import { Step, Steps } from 'fumadocs-ui/components/steps'; |
| 8 | +import Image from 'next/image'; |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | +<figure className="flex flex-col gap-4"> |
| 13 | + <Image |
| 14 | + src="/images/registry-light.png" |
| 15 | + width="1432" |
| 16 | + height="960" |
| 17 | + alt="Registry" |
| 18 | + className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden" |
| 19 | + /> |
| 20 | + <Image |
| 21 | + src="/images/registry-dark.png" |
| 22 | + width="1432" |
| 23 | + height="960" |
| 24 | + alt="Registry" |
| 25 | + className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block" |
| 26 | + /> |
| 27 | + <figcaption className="text-center text-sm text-gray-500"> |
| 28 | + A distribution system for code |
| 29 | + </figcaption> |
| 30 | +</figure> |
| 31 | + |
| 32 | +## Requirements |
| 33 | + |
| 34 | +You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the `shadcn` [registry-item schema specification](https://ui.shadcn.com/docs/registry/registry-item-json). |
| 35 | + |
| 36 | +If you'd like to see an example of a registry, we have a [react-native-reusables registry template](https://github.com/gabimoncha/rnr-registry-template) as a starting point. We have already configured it for you as a monorepo, with docs and a showcase app, and an example component which uses `react-native-reusables` as dependencies. |
| 37 | + |
| 38 | +## Getting started |
| 39 | + |
| 40 | +This guide will walk you through the process of setting up your own component registry. |
| 41 | + |
| 42 | +It assumes you already have a project with components and would like to turn it into a registry. |
| 43 | + |
| 44 | + |
| 45 | +## registry.json |
| 46 | + |
| 47 | +The `registry.json` file is only required if you're using the `shadcn` CLI to build your registry. |
| 48 | + |
| 49 | +If you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the `shadcn` [registry-item schema specification](https://ui.shadcn.com/docs/registry/registry-item-json). |
| 50 | + |
| 51 | +<Steps> |
| 52 | + |
| 53 | + |
| 54 | +### Create your component |
| 55 | + |
| 56 | +Add your first component. Here's an example of a simple `<HelloWorld />` component: |
| 57 | + |
| 58 | +```tsx title="registry/hello-world/hello-world.tsx" |
| 59 | +import { Text } from "react-native" |
| 60 | + |
| 61 | +export function HelloWorld() { |
| 62 | + return ( |
| 63 | + <Text>Hello World</Text> |
| 64 | + ) |
| 65 | +} |
| 66 | +``` |
| 67 | + |
| 68 | +<Callout className="mt-6"> |
| 69 | + **Note:** This example places the component in the `registry` |
| 70 | + directory. You can place it anywhere in your project as long as you set the |
| 71 | + correct path in the `registry.json` file and you follow the `registry/[NAME]` |
| 72 | + directory structure. |
| 73 | +</Callout> |
| 74 | + |
| 75 | +```txt |
| 76 | +registry |
| 77 | +└── hello-world |
| 78 | + └── hello-world.tsx |
| 79 | +``` |
| 80 | + |
| 81 | +### Add your component to the registry |
| 82 | + |
| 83 | +To add your component to the registry, you need to add your component definition to `registry.json`. |
| 84 | + |
| 85 | +```json title="registry.json" |
| 86 | +{ |
| 87 | + "$schema": "https://ui.shadcn.com/schema/registry.json", |
| 88 | + "name": "acme", |
| 89 | + "homepage": "https://acme.com", |
| 90 | + "items": [ |
| 91 | + { |
| 92 | + "name": "hello-world", |
| 93 | + "type": "registry:component", |
| 94 | + "title": "Hello World", |
| 95 | + "description": "A simple hello world component.", |
| 96 | + "files": [ |
| 97 | + { |
| 98 | + "path": "registry/hello-world/hello-world.tsx", |
| 99 | + "type": "registry:component" |
| 100 | + } |
| 101 | + ] |
| 102 | + } |
| 103 | + ] |
| 104 | +} |
| 105 | +``` |
| 106 | + |
| 107 | +You define your registry item by adding a `name`, `type`, `title`, `description` and `files`. |
| 108 | + |
| 109 | +For every file you add, you must specify the `path` and `type` of the file. The `path` is the relative path to the file from the root of your project. The `type` is the type of the file. |
| 110 | + |
| 111 | +You can read more about the registry item schema and file types in the `shadcn` [registry item schema docs](https://ui.shadcn.com/docs/registry/registry-item-json). |
| 112 | + |
| 113 | +</Steps> |
| 114 | + |
| 115 | +## Build your registry |
| 116 | + |
| 117 | +<Steps> |
| 118 | + |
| 119 | +### Install the shadcn CLI |
| 120 | + |
| 121 | +Note: the `build` command is currently only available in the `shadcn@canary` version of the CLI. |
| 122 | + |
| 123 | +```bash |
| 124 | +npm install shadcn@canary |
| 125 | +``` |
| 126 | + |
| 127 | +### Add a build script |
| 128 | + |
| 129 | +Add a `registry` script to your `package.json` file. |
| 130 | + |
| 131 | +```json title="package.json" |
| 132 | +{ |
| 133 | + "scripts": { |
| 134 | + "registry": "shadcn build" |
| 135 | + } |
| 136 | +} |
| 137 | +``` |
| 138 | + |
| 139 | +### Run the build script |
| 140 | + |
| 141 | +Run the build script to generate the registry JSON files. |
| 142 | + |
| 143 | +```bash |
| 144 | +npm run registry |
| 145 | +``` |
| 146 | + |
| 147 | +<Callout className="mt-6"> |
| 148 | +**Note:** By default, the script will look for `registry.json` and generate the registry JSON files in `public/r` |
| 149 | + |
| 150 | +e.g `public/r/hello-world.json`. |
| 151 | + |
| 152 | +You can change the output directory by passing the `--output` option. |
| 153 | + |
| 154 | +See the `shadcn` [build command](https://ui.shadcn.com/docs/cli#build) for more information. |
| 155 | + |
| 156 | +</Callout> |
| 157 | + |
| 158 | +</Steps> |
| 159 | + |
| 160 | +## Publish your registry |
| 161 | + |
| 162 | +To make your registry available to other developers, you can publish it by deploying your project to a public URL. |
| 163 | + |
| 164 | +<Callout className="mt-6"> |
| 165 | + |
| 166 | +**Notes:** Your files need to be served at `https://<your-domain>/r/[NAME].json` |
| 167 | + |
| 168 | +eg. `http://<your-domain>/r/hello-world.json`. |
| 169 | +</Callout> |
| 170 | + |
| 171 | + |
| 172 | + |
| 173 | +## Install using the CLI |
| 174 | + |
| 175 | +To install a registry item using the `shadcn` CLI, use the `add` command followed by the URL of the registry item. |
| 176 | + |
| 177 | +```bash |
| 178 | +npx @react-native-reusables/cli add https://<your-domain>/r/hello-world.json |
| 179 | +``` |
| 180 | + |
| 181 | +## Additional resources |
| 182 | + |
| 183 | +For more info about adding auth, guidelines, FAQs, other examples and json schemas you can check the following `shadcn` registry documentation pages: https://ui.shadcn.com/docs/registry |
0 commit comments