The modern registry toolchain

jsrepo handles the hard parts of registries so you can focus on building.

Configure your registry in seconds.

Build your registry instantly and watch for changes.

Add components to your project with a single command.

Update components in your project with interactive diffs.

✔ Wrote config to jsrepo.config.ts
✔ Installed dependencies.
✔ Initialization complete.

Host your registry anywhere

Host your registry publicly or privately wherever you want.

github/jsrepojs/registry-kit

@jsrepo/registry-kit

https://registry-kit.dev/r

Customize your experience with plugins

With a js based config the sky is the limit.

import { defineConfig } from "jsrepo";
import javascript from "@jsrepo/transform-javascript";
import prettier from "@jsrepo/transform-prettier";

export default defineConfig({
	transforms: [javascript(), prettier()], 
});

Shadcn compatible

Add and update items seamlessly from shadcn registries.

✔ Fetched manifest from shadcn:@react-bits/AnimatedContent-TS-TW
✔ Fetched AnimatedContent-TS-TW.
Added AnimatedContent-TS-TW to your project.Updated 1 file.

Built for LLMs

jsrepo is optimized for LLMs by giving them demos and documentation alongside registry items.

import { defineConfig } from "jsrepo";

export default defineConfig({
	registry: {
		name: '@registry/kit',
		description: 'Components for your registry.',
		items: [
			{
				name: 'button',
				type: 'component',
				files: [
					{
						path: 'src/components/button.tsx',
					},
					{ 
						path: 'src/demos/button.tsx', 
						role: 'demo', 
					}, 
				]
			}
		]
	}
});

Rest easy

If your registry builds with jsrepo, it will work for your users.

import { createHighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
import { customLang } from './langs/custom.ts';

export const highlighter = await createHighlighterCore({
  themes: [
    import('@shikijs/themes/nord'),
    import('@shikijs/themes/dark-plus'),
  ],
  langs: [
    import('@shikijs/langs/typescript'),
    import('@shikijs/langs/javascript'),
	customLang(),
  ],
  engine: createJavaScriptRegexEngine()
});

{
	name: "shiki",
	files: [
		{
			path: "shiki.ts",
			content: //...,
		}
	],
	// auto detect dependencies within your registry
	registryDependencies: ['custom'],
	// automatically detect remote dependencies
	dependencies: [
		'shiki', 
		// including dynamic imports
		'@shikijs/themes', 
		'@shikijs/langs'
	]
}

Ready to level up your registry?

Start Building