diff --git a/docs/llms-full.txt b/docs/llms-full.txt
index bcfc07f..fea60af 100644
--- a/docs/llms-full.txt
+++ b/docs/llms-full.txt
@@ -685,7 +685,7 @@ MIT
 A React checkout address form for Nigeria that accepts the 11-character NIPOST digital postcode (NDAPS), such as `FC-02-A09-DB-09`. It is built with [shadcn/ui](https://ui.shadcn.com) and [`ng-postcode-js`](https://www.npmjs.com/package/ng-postcode-js), and this folder is a Next.js app that uses it.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAdeniyikayodee%2Fng-postcode%2Ftree%2Fmain%2Ftemplates%2Fnigerian-address-form&project-name=nigerian-address-form)
-[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.dev/chat/api/open?url=https%3A%2F%2Fadeniyikayodee.github.io%2Fng-postcode%2Fr%2Fnigerian-address-form.json)
+[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https%3A%2F%2Fadeniyikayodee.github.io%2Fng-postcode%2Fr%2Fnigerian-address-form.json)
 
 ## Add it to your project
 
diff --git a/docs/r/nigerian-address-form.json b/docs/r/nigerian-address-form.json
index 93e85eb..5e6742b 100644
--- a/docs/r/nigerian-address-form.json
+++ b/docs/r/nigerian-address-form.json
@@ -7,16 +7,10 @@
     "ng-postcode-js@^0.4.4",
     "zod@^4.6.5"
   ],
-  "registryDependencies": [
-    "button",
-    "field",
-    "input",
-    "native-select"
-  ],
   "files": [
     {
       "path": "components/nigerian-address-form.tsx",
-      "content": "\"use client\";\n\nimport { type FocusEvent, type FormEvent, useRef, useState, useSyncExternalStore, useTransition } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\nimport {\n  type Address,\n  type AddressErrors,\n  type AddressInput,\n  addressSchema,\n  checkPostcode,\n  EXAMPLE,\n  fieldErrors,\n  STATES,\n} from \"@/lib/nigerian-address\";\n\ntype Props = {\n  /** Return field errors to show them, such as a postcode the server refused. */\n  onSubmit: (address: Address) => Promise<AddressErrors | void> | AddressErrors | void;\n  postcodeRequired?: boolean;\n  submitLabel?: string;\n};\n\ntype Name = keyof AddressInput;\n\nconst noop = () => () => {};\n\nexport function NigerianAddressForm({ onSubmit, postcodeRequired = false, submitLabel = \"Continue\" }: Props) {\n  const form = useRef<HTMLFormElement>(null);\n  const [errors, setErrors] = useState<AddressErrors>({});\n  const [suggestion, setSuggestion] = useState<string>();\n  const [failed, setFailed] = useState(false);\n  const [pending, startTransition] = useTransition();\n  // Until React runs, a click would submit the address as a plain GET.\n  const ready = useSyncExternalStore(noop, () => true, () => false);\n\n  function show(next: AddressErrors) {\n    setErrors(next);\n    const first = Object.keys(next)[0];\n    if (first) form.current?.querySelector<HTMLElement>(`[name=\"${first}\"]`)?.focus();\n  }\n\n  function checkOnBlur(event: FocusEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n    if (!input.value.trim()) return;\n    const check = checkPostcode(input.value);\n    if (check.ok) {\n      input.value = check.postcode;\n      return;\n    }\n    setSuggestion(check.suggestion);\n    setErrors((current) => ({ ...current, postcode: check.error }));\n  }\n\n  // Cleared on edit, not on blur: a message vanishing as the customer clicks\n  // \"Place order\" moves the button out from under the pointer.\n  function clearOnEdit(event: FormEvent<HTMLFormElement>) {\n    const { name } = event.target as HTMLInputElement;\n    if (name === \"postcode\") setSuggestion(undefined);\n    setErrors((current) => {\n      if (!(name in current)) return current;\n      const { [name as Name]: _, ...rest } = current;\n      return rest;\n    });\n  }\n\n  function applySuggestion() {\n    const input = form.current?.elements.namedItem(\"postcode\");\n    if (input instanceof HTMLInputElement && suggestion) {\n      input.value = suggestion;\n      // The button that had focus is about to go away.\n      input.focus();\n    }\n    setSuggestion(undefined);\n    setErrors(({ postcode: _, ...rest }) => rest);\n  }\n\n  function submit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    setFailed(false);\n    const result = addressSchema({ postcodeRequired }).safeParse(\n      Object.fromEntries(new FormData(event.currentTarget)),\n    );\n    if (!result.success) return show(fieldErrors(result.error));\n    setErrors({});\n    startTransition(async () => {\n      try {\n        const refused = await onSubmit(result.data);\n        if (refused) show(refused);\n      } catch {\n        setFailed(true);\n      }\n    });\n  }\n\n  function field(name: Name) {\n    const error = errors[name];\n    return {\n      id: name,\n      name,\n      \"aria-invalid\": error ? true : undefined,\n      \"aria-describedby\": error ? `${name}-error` : undefined,\n    };\n  }\n\n  function error(name: Name) {\n    const message = errors[name];\n    if (!message) return null;\n    // Keep the example code on one line.\n    const [before, after] = message.split(EXAMPLE);\n    return (\n      <FieldError id={`${name}-error`}>\n        {after === undefined ? message : <>{before}<span className=\"whitespace-nowrap\">{EXAMPLE}</span>{after}</>}\n      </FieldError>\n    );\n  }\n\n  return (\n    <form ref={form} onSubmit={submit} onChange={clearOnEdit} noValidate aria-busy={pending}>\n      <FieldGroup>\n        <Field data-invalid={!!errors.name}>\n          <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\n          <Input {...field(\"name\")} autoComplete=\"name\" />\n          {error(\"name\")}\n        </Field>\n        <Field data-invalid={!!errors.phone}>\n          <FieldLabel htmlFor=\"phone\">Phone number</FieldLabel>\n          <Input {...field(\"phone\")} type=\"tel\" autoComplete=\"tel\" inputMode=\"tel\" placeholder=\"0803 123 4567\" />\n          {error(\"phone\")}\n        </Field>\n        <Field data-invalid={!!errors.street}>\n          <FieldLabel htmlFor=\"street\">Street address</FieldLabel>\n          <Input {...field(\"street\")} autoComplete=\"street-address\" />\n          {error(\"street\")}\n        </Field>\n        <Field data-invalid={!!errors.city}>\n          <FieldLabel htmlFor=\"city\">Town or city</FieldLabel>\n          <Input {...field(\"city\")} autoComplete=\"address-level2\" />\n          {error(\"city\")}\n        </Field>\n        <Field data-invalid={!!errors.lga}>\n          <FieldLabel htmlFor=\"lga\">Local government area (optional)</FieldLabel>\n          <Input {...field(\"lga\")} />\n          {error(\"lga\")}\n        </Field>\n        <Field data-invalid={!!errors.state}>\n          <FieldLabel htmlFor=\"state\">State</FieldLabel>\n          <NativeSelect {...field(\"state\")} autoComplete=\"address-level1\" defaultValue=\"\" className=\"w-full\">\n            <NativeSelectOption value=\"\" disabled>\n              Choose a state\n            </NativeSelectOption>\n            {STATES.map((state) => (\n              <NativeSelectOption key={state} value={state}>\n                {state}\n              </NativeSelectOption>\n            ))}\n          </NativeSelect>\n          {error(\"state\")}\n        </Field>\n        <Field data-invalid={!!errors.postcode}>\n          <FieldLabel htmlFor=\"postcode\">Postcode{postcodeRequired ? \"\" : \" (optional)\"}</FieldLabel>\n          <Input\n            {...field(\"postcode\")}\n            autoComplete=\"postal-code\"\n            autoCapitalize=\"characters\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            maxLength={24}\n            placeholder={EXAMPLE}\n            onBlur={checkOnBlur}\n          />\n          <FieldDescription>\n            The 11-character NIPOST postcode. Find yours at{\" \"}\n            <a href=\"https://postcode.gov.ng/find\" target=\"_blank\" rel=\"noreferrer\">\n              postcode.gov.ng\n            </a>\n            .\n          </FieldDescription>\n          {error(\"postcode\")}\n          {suggestion && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={applySuggestion}>\n              Use {suggestion}\n            </Button>\n          )}\n        </Field>\n        {failed && <FieldError>We could not send your address. Try again.</FieldError>}\n        <Button type=\"submit\" disabled={!ready || pending}>\n          {pending ? \"Sending…\" : submitLabel}\n        </Button>\n      </FieldGroup>\n    </form>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type FocusEvent,\n  type FormEvent,\n  type ReactNode,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  useTransition,\n} from \"react\";\nimport {\n  type Address,\n  type AddressErrors,\n  type AddressInput,\n  addressSchema,\n  checkPostcode,\n  EXAMPLE,\n  fieldErrors,\n  STATES,\n} from \"@/lib/nigerian-address\";\n\ntype Props = {\n  /** Return field errors to show them, such as a postcode the server refused. Without it the form only validates. */\n  onSubmit?: (address: Address) => Promise<AddressErrors | void> | AddressErrors | void;\n  postcodeRequired?: boolean;\n  submitLabel?: string;\n};\n\ntype Name = keyof AddressInput;\n\nconst noop = () => () => {};\n\n// Plain elements styled with the shadcn theme, so the form needs no other component\n// and installs the same in every shadcn style and in v0.\nconst control =\n  \"h-9 w-full rounded-md border border-input bg-transparent px-3 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30\";\nconst button =\n  \"inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\";\n\nexport function NigerianAddressForm({ onSubmit, postcodeRequired = false, submitLabel = \"Continue\" }: Props) {\n  const form = useRef<HTMLFormElement>(null);\n  const [errors, setErrors] = useState<AddressErrors>({});\n  const [suggestion, setSuggestion] = useState<string>();\n  const [failed, setFailed] = useState(false);\n  const [pending, startTransition] = useTransition();\n  // Until React runs, a click would submit the address as a plain GET.\n  const ready = useSyncExternalStore(noop, () => true, () => false);\n\n  function show(next: AddressErrors) {\n    setErrors(next);\n    const first = Object.keys(next)[0];\n    if (first) form.current?.querySelector<HTMLElement>(`[name=\"${first}\"]`)?.focus();\n  }\n\n  function checkOnBlur(event: FocusEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n    if (!input.value.trim()) return;\n    const check = checkPostcode(input.value);\n    if (check.ok) {\n      input.value = check.postcode;\n      return;\n    }\n    setSuggestion(check.suggestion);\n    setErrors((current) => ({ ...current, postcode: check.error }));\n  }\n\n  // Cleared on edit, not on blur: a message vanishing as the customer clicks\n  // \"Place order\" moves the button out from under the pointer.\n  function clearOnEdit(event: FormEvent<HTMLFormElement>) {\n    const { name } = event.target as HTMLInputElement;\n    if (name === \"postcode\") setSuggestion(undefined);\n    setErrors((current) => {\n      if (!(name in current)) return current;\n      const { [name as Name]: _, ...rest } = current;\n      return rest;\n    });\n  }\n\n  function applySuggestion() {\n    const input = form.current?.elements.namedItem(\"postcode\");\n    if (input instanceof HTMLInputElement && suggestion) {\n      input.value = suggestion;\n      // The button that had focus is about to go away.\n      input.focus();\n    }\n    setSuggestion(undefined);\n    setErrors(({ postcode: _, ...rest }) => rest);\n  }\n\n  function submit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    setFailed(false);\n    const result = addressSchema({ postcodeRequired }).safeParse(\n      Object.fromEntries(new FormData(event.currentTarget)),\n    );\n    if (!result.success) return show(fieldErrors(result.error));\n    setErrors({});\n    startTransition(async () => {\n      try {\n        const refused = await onSubmit?.(result.data);\n        if (refused) show(refused);\n      } catch {\n        setFailed(true);\n      }\n    });\n  }\n\n  function field(name: Name) {\n    const error = errors[name];\n    return {\n      id: name,\n      name,\n      \"aria-invalid\": error ? true : undefined,\n      \"aria-describedby\": error ? `${name}-error` : undefined,\n    };\n  }\n\n  function error(name: Name) {\n    const message = errors[name];\n    if (!message) return null;\n    // Keep the example code on one line.\n    const [before, after] = message.split(EXAMPLE);\n    return (\n      <p id={`${name}-error`} role=\"alert\" className=\"text-sm text-destructive\">\n        {after === undefined ? message : <>{before}<span className=\"whitespace-nowrap\">{EXAMPLE}</span>{after}</>}\n      </p>\n    );\n  }\n\n  function row(name: Name, label: string, input: ReactNode, extra?: ReactNode) {\n    return (\n      <div className=\"grid gap-2\">\n        <label htmlFor={name} className=\"text-sm font-medium\">\n          {label}\n        </label>\n        {input}\n        {extra}\n        {error(name)}\n      </div>\n    );\n  }\n\n  return (\n    <form ref={form} onSubmit={submit} onChange={clearOnEdit} noValidate aria-busy={pending} className=\"grid gap-5\">\n      {row(\"name\", \"Full name\", <input {...field(\"name\")} autoComplete=\"name\" className={control} />)}\n      {row(\n        \"phone\",\n        \"Phone number\",\n        <input {...field(\"phone\")} type=\"tel\" autoComplete=\"tel\" inputMode=\"tel\" placeholder=\"0803 123 4567\" className={control} />,\n      )}\n      {row(\"street\", \"Street address\", <input {...field(\"street\")} autoComplete=\"street-address\" className={control} />)}\n      {row(\"city\", \"Town or city\", <input {...field(\"city\")} autoComplete=\"address-level2\" className={control} />)}\n      {row(\"lga\", \"Local government area (optional)\", <input {...field(\"lga\")} className={control} />)}\n      {row(\n        \"state\",\n        \"State\",\n        <select {...field(\"state\")} autoComplete=\"address-level1\" defaultValue=\"\" className={control}>\n          <option value=\"\" disabled>\n            Choose a state\n          </option>\n          {STATES.map((state) => (\n            <option key={state} value={state}>\n              {state}\n            </option>\n          ))}\n        </select>,\n      )}\n      {row(\n        \"postcode\",\n        `Postcode${postcodeRequired ? \"\" : \" (optional)\"}`,\n        <input\n          {...field(\"postcode\")}\n          autoComplete=\"postal-code\"\n          autoCapitalize=\"characters\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          maxLength={24}\n          placeholder={EXAMPLE}\n          onBlur={checkOnBlur}\n          className={control}\n        />,\n        <p className=\"text-sm text-muted-foreground\">\n          The 11-character NIPOST postcode. Find yours at{\" \"}\n          <a href=\"https://postcode.gov.ng/find\" target=\"_blank\" rel=\"noreferrer\" className=\"underline\">\n            postcode.gov.ng\n          </a>\n          .\n        </p>,\n      )}\n      {suggestion && (\n        <button type=\"button\" onClick={applySuggestion} className={`${button} -mt-3 w-fit border border-input`}>\n          Use {suggestion}\n        </button>\n      )}\n      {failed && (\n        <p role=\"alert\" className=\"text-sm text-destructive\">\n          We could not send your address. Try again.\n        </p>\n      )}\n      <button type=\"submit\" disabled={!ready || pending} className={`${button} bg-primary text-primary-foreground`}>\n        {pending ? \"Sending…\" : submitLabel}\n      </button>\n    </form>\n  );\n}\n\nexport default NigerianAddressForm;\n",
       "type": "registry:component"
     },
     {
diff --git a/docs/r/registry.json b/docs/r/registry.json
index 739ef89..67a3fe8 100644
--- a/docs/r/registry.json
+++ b/docs/r/registry.json
@@ -8,15 +8,30 @@
       "type": "registry:block",
       "title": "Nigerian address form",
       "description": "Checkout address form for Nigeria that accepts the 11-character NIPOST digital postcode (NDAPS), such as FC-02-A09-DB-09, checked offline with ng-postcode-js.",
-      "dependencies": ["ng-postcode-js@^0.4.4", "zod@^4.6.5"],
-      "registryDependencies": ["button", "field", "input", "native-select"],
+      "dependencies": [
+        "ng-postcode-js@^0.4.4",
+        "zod@^4.6.5"
+      ],
       "files": [
-        { "path": "components/nigerian-address-form.tsx", "type": "registry:component" },
-        { "path": "lib/nigerian-address.ts", "type": "registry:lib" },
-        { "path": "lib/nipost.ts", "type": "registry:lib" }
+        {
+          "path": "components/nigerian-address-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "lib/nigerian-address.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "lib/nipost.ts",
+          "type": "registry:lib"
+        }
       ],
       "docs": "Validate again on the server with addressSchema().safeParse. To confirm a code is assigned, call isAssigned from lib/nipost.ts with nipostClient(process.env.NG_POSTCODE_API_KEY).",
-      "categories": ["forms", "checkout", "address"]
+      "categories": [
+        "forms",
+        "checkout",
+        "address"
+      ]
     }
   ]
 }
diff --git a/templates/nigerian-address-form/README.md b/templates/nigerian-address-form/README.md
index bddbd8a..fc10ad3 100644
--- a/templates/nigerian-address-form/README.md
+++ b/templates/nigerian-address-form/README.md
@@ -3,7 +3,7 @@
 A React checkout address form for Nigeria that accepts the 11-character NIPOST digital postcode (NDAPS), such as `FC-02-A09-DB-09`. It is built with [shadcn/ui](https://ui.shadcn.com) and [`ng-postcode-js`](https://www.npmjs.com/package/ng-postcode-js), and this folder is a Next.js app that uses it.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAdeniyikayodee%2Fng-postcode%2Ftree%2Fmain%2Ftemplates%2Fnigerian-address-form&project-name=nigerian-address-form)
-[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.dev/chat/api/open?url=https%3A%2F%2Fadeniyikayodee.github.io%2Fng-postcode%2Fr%2Fnigerian-address-form.json)
+[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https%3A%2F%2Fadeniyikayodee.github.io%2Fng-postcode%2Fr%2Fnigerian-address-form.json)
 
 ## Add it to your project
 
diff --git a/templates/nigerian-address-form/components/nigerian-address-form.test.tsx b/templates/nigerian-address-form/components/nigerian-address-form.test.tsx
index 9625721..1357eca 100644
--- a/templates/nigerian-address-form/components/nigerian-address-form.test.tsx
+++ b/templates/nigerian-address-form/components/nigerian-address-form.test.tsx
@@ -1,7 +1,7 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, expect, it, vi } from "vitest";
-import { NigerianAddressForm } from "./nigerian-address-form";
+import Default, { NigerianAddressForm } from "./nigerian-address-form";
 
 afterEach(cleanup);
 
@@ -96,3 +96,10 @@ it("clears an error once the customer edits the field", async () => {
   await user.tab();
   expect(screen.getByRole("alert").textContent).toMatch(/A postcode has 11/);
 });
+
+it("works as a default import with no props", async () => {
+  render(<Default />);
+  const user = await fill("FC-02-A09-DB-09");
+  await user.click(screen.getByRole("button", { name: "Continue" }));
+  expect(screen.queryByRole("alert")).toBeNull();
+});
diff --git a/templates/nigerian-address-form/components/nigerian-address-form.tsx b/templates/nigerian-address-form/components/nigerian-address-form.tsx
index 62a494e..ff1f916 100644
--- a/templates/nigerian-address-form/components/nigerian-address-form.tsx
+++ b/templates/nigerian-address-form/components/nigerian-address-form.tsx
@@ -1,10 +1,14 @@
 "use client";
 
-import { type FocusEvent, type FormEvent, useRef, useState, useSyncExternalStore, useTransition } from "react";
-import { Button } from "@/components/ui/button";
-import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
+import {
+  type FocusEvent,
+  type FormEvent,
+  type ReactNode,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+} from "react";
 import {
   type Address,
   type AddressErrors,
@@ -17,8 +21,8 @@ import {
 } from "@/lib/nigerian-address";
 
 type Props = {
-  /** Return field errors to show them, such as a postcode the server refused. */
-  onSubmit: (address: Address) => Promise<AddressErrors | void> | AddressErrors | void;
+  /** Return field errors to show them, such as a postcode the server refused. Without it the form only validates. */
+  onSubmit?: (address: Address) => Promise<AddressErrors | void> | AddressErrors | void;
   postcodeRequired?: boolean;
   submitLabel?: string;
 };
@@ -27,6 +31,13 @@ type Name = keyof AddressInput;
 
 const noop = () => () => {};
 
+// Plain elements styled with the shadcn theme, so the form needs no other component
+// and installs the same in every shadcn style and in v0.
+const control =
+  "h-9 w-full rounded-md border border-input bg-transparent px-3 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30";
+const button =
+  "inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50";
+
 export function NigerianAddressForm({ onSubmit, postcodeRequired = false, submitLabel = "Continue" }: Props) {
   const form = useRef<HTMLFormElement>(null);
   const [errors, setErrors] = useState<AddressErrors>({});
@@ -87,7 +98,7 @@ export function NigerianAddressForm({ onSubmit, postcodeRequired = false, submit
     setErrors({});
     startTransition(async () => {
       try {
-        const refused = await onSubmit(result.data);
+        const refused = await onSubmit?.(result.data);
         if (refused) show(refused);
       } catch {
         setFailed(true);
@@ -111,85 +122,87 @@ export function NigerianAddressForm({ onSubmit, postcodeRequired = false, submit
     // Keep the example code on one line.
     const [before, after] = message.split(EXAMPLE);
     return (
-      <FieldError id={`${name}-error`}>
+      <p id={`${name}-error`} role="alert" className="text-sm text-destructive">
         {after === undefined ? message : <>{before}<span className="whitespace-nowrap">{EXAMPLE}</span>{after}</>}
-      </FieldError>
+      </p>
+    );
+  }
+
+  function row(name: Name, label: string, input: ReactNode, extra?: ReactNode) {
+    return (
+      <div className="grid gap-2">
+        <label htmlFor={name} className="text-sm font-medium">
+          {label}
+        </label>
+        {input}
+        {extra}
+        {error(name)}
+      </div>
     );
   }
 
   return (
-    <form ref={form} onSubmit={submit} onChange={clearOnEdit} noValidate aria-busy={pending}>
-      <FieldGroup>
-        <Field data-invalid={!!errors.name}>
-          <FieldLabel htmlFor="name">Full name</FieldLabel>
-          <Input {...field("name")} autoComplete="name" />
-          {error("name")}
-        </Field>
-        <Field data-invalid={!!errors.phone}>
-          <FieldLabel htmlFor="phone">Phone number</FieldLabel>
-          <Input {...field("phone")} type="tel" autoComplete="tel" inputMode="tel" placeholder="0803 123 4567" />
-          {error("phone")}
-        </Field>
-        <Field data-invalid={!!errors.street}>
-          <FieldLabel htmlFor="street">Street address</FieldLabel>
-          <Input {...field("street")} autoComplete="street-address" />
-          {error("street")}
-        </Field>
-        <Field data-invalid={!!errors.city}>
-          <FieldLabel htmlFor="city">Town or city</FieldLabel>
-          <Input {...field("city")} autoComplete="address-level2" />
-          {error("city")}
-        </Field>
-        <Field data-invalid={!!errors.lga}>
-          <FieldLabel htmlFor="lga">Local government area (optional)</FieldLabel>
-          <Input {...field("lga")} />
-          {error("lga")}
-        </Field>
-        <Field data-invalid={!!errors.state}>
-          <FieldLabel htmlFor="state">State</FieldLabel>
-          <NativeSelect {...field("state")} autoComplete="address-level1" defaultValue="" className="w-full">
-            <NativeSelectOption value="" disabled>
-              Choose a state
-            </NativeSelectOption>
-            {STATES.map((state) => (
-              <NativeSelectOption key={state} value={state}>
-                {state}
-              </NativeSelectOption>
-            ))}
-          </NativeSelect>
-          {error("state")}
-        </Field>
-        <Field data-invalid={!!errors.postcode}>
-          <FieldLabel htmlFor="postcode">Postcode{postcodeRequired ? "" : " (optional)"}</FieldLabel>
-          <Input
-            {...field("postcode")}
-            autoComplete="postal-code"
-            autoCapitalize="characters"
-            autoCorrect="off"
-            spellCheck={false}
-            maxLength={24}
-            placeholder={EXAMPLE}
-            onBlur={checkOnBlur}
-          />
-          <FieldDescription>
-            The 11-character NIPOST postcode. Find yours at{" "}
-            <a href="https://postcode.gov.ng/find" target="_blank" rel="noreferrer">
-              postcode.gov.ng
-            </a>
-            .
-          </FieldDescription>
-          {error("postcode")}
-          {suggestion && (
-            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={applySuggestion}>
-              Use {suggestion}
-            </Button>
-          )}
-        </Field>
-        {failed && <FieldError>We could not send your address. Try again.</FieldError>}
-        <Button type="submit" disabled={!ready || pending}>
-          {pending ? "Sending…" : submitLabel}
-        </Button>
-      </FieldGroup>
+    <form ref={form} onSubmit={submit} onChange={clearOnEdit} noValidate aria-busy={pending} className="grid gap-5">
+      {row("name", "Full name", <input {...field("name")} autoComplete="name" className={control} />)}
+      {row(
+        "phone",
+        "Phone number",
+        <input {...field("phone")} type="tel" autoComplete="tel" inputMode="tel" placeholder="0803 123 4567" className={control} />,
+      )}
+      {row("street", "Street address", <input {...field("street")} autoComplete="street-address" className={control} />)}
+      {row("city", "Town or city", <input {...field("city")} autoComplete="address-level2" className={control} />)}
+      {row("lga", "Local government area (optional)", <input {...field("lga")} className={control} />)}
+      {row(
+        "state",
+        "State",
+        <select {...field("state")} autoComplete="address-level1" defaultValue="" className={control}>
+          <option value="" disabled>
+            Choose a state
+          </option>
+          {STATES.map((state) => (
+            <option key={state} value={state}>
+              {state}
+            </option>
+          ))}
+        </select>,
+      )}
+      {row(
+        "postcode",
+        `Postcode${postcodeRequired ? "" : " (optional)"}`,
+        <input
+          {...field("postcode")}
+          autoComplete="postal-code"
+          autoCapitalize="characters"
+          autoCorrect="off"
+          spellCheck={false}
+          maxLength={24}
+          placeholder={EXAMPLE}
+          onBlur={checkOnBlur}
+          className={control}
+        />,
+        <p className="text-sm text-muted-foreground">
+          The 11-character NIPOST postcode. Find yours at{" "}
+          <a href="https://postcode.gov.ng/find" target="_blank" rel="noreferrer" className="underline">
+            postcode.gov.ng
+          </a>
+          .
+        </p>,
+      )}
+      {suggestion && (
+        <button type="button" onClick={applySuggestion} className={`${button} -mt-3 w-fit border border-input`}>
+          Use {suggestion}
+        </button>
+      )}
+      {failed && (
+        <p role="alert" className="text-sm text-destructive">
+          We could not send your address. Try again.
+        </p>
+      )}
+      <button type="submit" disabled={!ready || pending} className={`${button} bg-primary text-primary-foreground`}>
+        {pending ? "Sending…" : submitLabel}
+      </button>
     </form>
   );
 }
+
+export default NigerianAddressForm;
diff --git a/templates/nigerian-address-form/components/ui/button.tsx b/templates/nigerian-address-form/components/ui/button.tsx
deleted file mode 100644
index 997e0c7..0000000
--- a/templates/nigerian-address-form/components/ui/button.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/templates/nigerian-address-form/components/ui/field.tsx b/templates/nigerian-address-form/components/ui/field.tsx
deleted file mode 100644
index 8ae7f29..0000000
--- a/templates/nigerian-address-form/components/ui/field.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-        horizontal:
-          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        responsive:
-          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors?.length) {
-      return null
-    }
-
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}
diff --git a/templates/nigerian-address-form/components/ui/input.tsx b/templates/nigerian-address-form/components/ui/input.tsx
deleted file mode 100644
index 7c4ab5a..0000000
--- a/templates/nigerian-address-form/components/ui/input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
-import { cn } from "cn"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <InputPrimitive
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/templates/nigerian-address-form/components/ui/label.tsx b/templates/nigerian-address-form/components/ui/label.tsx
deleted file mode 100644
index ddfd2e1..0000000
--- a/templates/nigerian-address-form/components/ui/label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "cn"
-
-function Label({ className, ...props }: React.ComponentProps<"label">) {
-  return (
-    <label
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/templates/nigerian-address-form/components/ui/native-select.tsx b/templates/nigerian-address-form/components/ui/native-select.tsx
deleted file mode 100644
index aad5cd0..0000000
--- a/templates/nigerian-address-form/components/ui/native-select.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { ChevronDownIcon } from "lucide-react"
-
-type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
-  size?: "sm" | "default"
-}
-
-function NativeSelect({
-  className,
-  size = "default",
-  ...props
-}: NativeSelectProps) {
-  return (
-    <div
-      className={cn(
-        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
-        className
-      )}
-      data-slot="native-select-wrapper"
-      data-size={size}
-    >
-      <select
-        data-slot="native-select"
-        data-size={size}
-        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-        {...props}
-      />
-      <ChevronDownIcon className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
-    </div>
-  )
-}
-
-function NativeSelectOption({
-  className,
-  ...props
-}: React.ComponentProps<"option">) {
-  return (
-    <option
-      data-slot="native-select-option"
-      className={cn("bg-[Canvas] text-[CanvasText]", className)}
-      {...props}
-    />
-  )
-}
-
-function NativeSelectOptGroup({
-  className,
-  ...props
-}: React.ComponentProps<"optgroup">) {
-  return (
-    <optgroup
-      data-slot="native-select-optgroup"
-      className={cn("bg-[Canvas] text-[CanvasText]", className)}
-      {...props}
-    />
-  )
-}
-
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/templates/nigerian-address-form/components/ui/separator.tsx b/templates/nigerian-address-form/components/ui/separator.tsx
deleted file mode 100644
index d69c134..0000000
--- a/templates/nigerian-address-form/components/ui/separator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-import { cn } from "cn"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
-  return (
-    <SeparatorPrimitive
-      data-slot="separator"
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/templates/nigerian-address-form/lib/utils.ts b/templates/nigerian-address-form/lib/utils.ts
deleted file mode 100644
index f815ded..0000000
--- a/templates/nigerian-address-form/lib/utils.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { cn } from "cn"
diff --git a/templates/nigerian-address-form/package-lock.json b/templates/nigerian-address-form/package-lock.json
index ba70879..df8ca0f 100644
--- a/templates/nigerian-address-form/package-lock.json
+++ b/templates/nigerian-address-form/package-lock.json
@@ -8,10 +8,6 @@
       "name": "nigerian-address-form",
       "version": "0.1.0",
       "dependencies": {
-        "@base-ui/react": "1.8.0",
-        "class-variance-authority": "0.7.1",
-        "cn": "0.4.0",
-        "lucide-react": "1.52.0",
         "next": "16.4.0",
         "ng-postcode-js": "0.4.4",
         "react": "19.3.0",
@@ -482,6 +478,7 @@
       "version": "7.29.10",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.10.tgz",
       "integrity": "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -535,66 +532,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@base-ui/react": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.8.0.tgz",
-      "integrity": "sha512-P0/1sxo6SBVZOklKMIedvTWqw2s2IQzi9x5bIVsXu980cuSOD4NeuRSs+/L7LZQfDkZP/uRZyGPyfFl/B1oH+Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@base-ui/utils": "0.4.0",
-        "@floating-ui/react-dom": "^2.1.9",
-        "@floating-ui/utils": "^0.2.12",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@date-fns/tz": "^1.2.0",
-        "@types/react": "^17 || ^18 || ^19",
-        "date-fns": "^4.0.0",
-        "react": "^17 || ^18 || ^19",
-        "react-dom": "^17 || ^18 || ^19"
-      },
-      "peerDependenciesMeta": {
-        "@date-fns/tz": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        },
-        "date-fns": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@base-ui/utils": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.4.0.tgz",
-      "integrity": "sha512-bO9fz25kKtPf+aZVyfQrC0PDmJdmVni31W2hCS5/Owb+inwdIL3XU26pCPRPlt4LSxZrBgLwubXQXQlKaFEZzw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@floating-ui/utils": "^0.2.12",
-        "reselect": "^5.2.0",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^17 || ^18 || ^19",
-        "react": "^17 || ^18 || ^19",
-        "react-dom": "^17 || ^18 || ^19"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.3.tgz",
@@ -981,44 +918,6 @@
         }
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
-      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.12"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
-      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.8.0",
-        "@floating-ui/utils": "^0.2.12"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
-      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.8.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
-      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
-      "license": "MIT"
-    },
     "node_modules/@hono/node-server": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.5.tgz",
@@ -2662,7 +2561,7 @@
       "version": "19.3.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
       "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3089,18 +2988,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/class-variance-authority": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
-      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "funding": {
-        "url": "https://polar.sh/cva"
-      }
-    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -3136,27 +3023,6 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/cn": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cn/-/cn-0.4.0.tgz",
-      "integrity": "sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==",
-      "license": "MIT",
-      "bin": {
-        "cn": "bin/cn.mjs"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
     "node_modules/code-block-writer": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
@@ -3375,7 +3241,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -5016,21 +4882,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.52.0.tgz",
-      "integrity": "sha512-TUgPtl5ZI9WgxOcbu4ckaC5B3l1qxPQrCMgb6OfUB9owx/OvSJfcf93SMgUWAxRw5/1XDfh9uI5F5iNGXCcGDQ==",
-      "license": "ISC",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -5959,12 +5810,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/reselect": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.3.0.tgz",
-      "integrity": "sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==",
-      "license": "MIT"
-    },
     "node_modules/restore-cursor": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -7006,15 +6851,6 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
-      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/templates/nigerian-address-form/package.json b/templates/nigerian-address-form/package.json
index bd3bf8d..11a3fb3 100644
--- a/templates/nigerian-address-form/package.json
+++ b/templates/nigerian-address-form/package.json
@@ -11,10 +11,6 @@
     "registry": "shadcn build --output ../../docs/r"
   },
   "dependencies": {
-    "@base-ui/react": "1.8.0",
-    "class-variance-authority": "0.7.1",
-    "cn": "0.4.0",
-    "lucide-react": "1.52.0",
     "next": "16.4.0",
     "ng-postcode-js": "0.4.4",
     "react": "19.3.0",
diff --git a/templates/nigerian-address-form/registry.json b/templates/nigerian-address-form/registry.json
index 739ef89..67a3fe8 100644
--- a/templates/nigerian-address-form/registry.json
+++ b/templates/nigerian-address-form/registry.json
@@ -8,15 +8,30 @@
       "type": "registry:block",
       "title": "Nigerian address form",
       "description": "Checkout address form for Nigeria that accepts the 11-character NIPOST digital postcode (NDAPS), such as FC-02-A09-DB-09, checked offline with ng-postcode-js.",
-      "dependencies": ["ng-postcode-js@^0.4.4", "zod@^4.6.5"],
-      "registryDependencies": ["button", "field", "input", "native-select"],
+      "dependencies": [
+        "ng-postcode-js@^0.4.4",
+        "zod@^4.6.5"
+      ],
       "files": [
-        { "path": "components/nigerian-address-form.tsx", "type": "registry:component" },
-        { "path": "lib/nigerian-address.ts", "type": "registry:lib" },
-        { "path": "lib/nipost.ts", "type": "registry:lib" }
+        {
+          "path": "components/nigerian-address-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "lib/nigerian-address.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "lib/nipost.ts",
+          "type": "registry:lib"
+        }
       ],
       "docs": "Validate again on the server with addressSchema().safeParse. To confirm a code is assigned, call isAssigned from lib/nipost.ts with nipostClient(process.env.NG_POSTCODE_API_KEY).",
-      "categories": ["forms", "checkout", "address"]
+      "categories": [
+        "forms",
+        "checkout",
+        "address"
+      ]
     }
   ]
 }