#1118·nuqs

Implement shadcn registry

Author: franky47Created Sep 5, 2025Updated Sep 25, 2025

Labelsdocumentationfeature

Discussed in https://github.com/47ng/nuqs/discussions/916

Originally posted by junwen-k February 13, 2025 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

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

typescript

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:

bash

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:

bash

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!

Scoped & trusted registries

This could cleanup the CLI even further, and not require users to have to touch their components.json file (if they even have one):

bash

npx shadcn add @nuqs/pagination
npx shadcn add @nuqs/adapters/waku
npx shadcn add @nuqs/adapters/inertia
npx shadcn add @nuqs/helpers/zod-codecs
npx shadcn add @nuqs/helpers/nextjs-typed-routes

https://x.com/theorcdev/status/1963520008706769062

https://shadcnregistry.com/hookas

Source: 47ng/nuqs

View original on GitHub View discussion on GitHub