Custom registry installation support using shadcn CLI instead of copy-pasting for community parsers

[junwen-k]

We could potentially leverage shadcn's new custom registry support for a seamless community parsers installation process. I ran a quick test, and it seems to work:

registry.json

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "nuqs",
  "homepage": "https://nuqs.47ng.com",
  "items": [
    {
      "name": "use-pagination-search-params",
      "type": "registry:hook",
      "title": "usePaginationSearchParams",
      "description": "A hook to use pagination search params.",
      "dependencies": ["nuqs"],
      "files": [
        {
          "path": "registry/hooks/use-pagination-search-params.ts",
          "type": "registry:hook"
        }
      ]
    }
  ]
}

registry/hooks/use-pagination-search-params.ts

import { createParser, parseAsInteger, useQueryStates } from "nuqs";

// Page index is zero-indexed internally but one-indexed in the URL
// to align with UI expectations.
const pageIndexParser = createParser({
  parse: (query) => {
    const page = parseAsInteger.parse(query);
    return page === null ? null : page - 1;
  },
  serialize: (value) => parseAsInteger.serialize(value + 1),
});

const paginationParsers = {
  pageIndex: pageIndexParser.withDefault(0),
  pageSize: parseAsInteger.withDefault(10),
};

const paginationUrlKeys = {
  pageIndex: "page",
  pageSize: "perPage",
};

export function usePaginationSearchParams() {
  return useQueryStates(paginationParsers, { urlKeys: paginationUrlKeys });
}

Installation

Following the shadcn setup guide, after running:

shadcn build

We get the registry output. Now, assuming this is hosted at https://nuqs.47ng.com/r/use-pagination-search-params.json, we can seamlessly install the hook with:

pnpm dlx shadcn@latest add https://nuqs.47ng.com/r/use-pagination-search-params.json

This might however require users to have the components.json in order for it to work though, but it's worth exploring!

[franky47]

Ohhh I like that idea a lot! 👀

Resources:

• https://ouassim.tech/notes/shadcn-registry-a-better-way-to-manage-your-ui-components/

[codewithshek]

I love that idea! It could streamline the installation process significantly and make it much easier for the community to adopt new parsers. Let's explore this further and see how we can integrate it seamlessly. Great job on the initial test!