Users

Add it to your project

The command installs only the module; the page is your call. Your choices below prepare the prompt and the page code.

Add the users module to my ViraStack Start project.

1. Run `npx virastack add users` in the project root. It installs only the `src/features/users` folder and its packages, and creates no page. If you get a conflict error, delete nothing and tell me.
2. Confirm from `package.json` and the folder structure that the project uses Next.js. If it does not, stop and ask me.
3. Create `src/app/users/page.tsx` with the code below. If the file exists, do not overwrite it; add `UsersDirectory` to the existing page.

```tsx
import { Suspense } from "react"

import { UsersDirectory } from "@/features/users/components/UsersDirectory"
import { UsersDirectorySkeleton } from "@/features/users/components/UsersDirectorySkeleton"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <Suspense fallback={<UsersDirectorySkeleton />}>
        <UsersDirectory />
      </Suspense>
    </main>
  )
}
```

4. If I gave you my API address, set it in `NEXT_PUBLIC_API_URL` on Next.js or `VITE_API_URL` on TanStack Start. If the response shape differs, adapt what needs changing inside `src/features/users`.
5. Run the `typecheck`, `test` and `lint:ci` scripts with the project's package manager and report the result.

What's in the module?

• The user list sends API requests with TanStack Query and validates responses with Zod.
• Search and pagination use URL state: nuqs on Next.js, validateSearch on TanStack Start. Search is debounced.
• Adding and editing share one form that holds the table's fields. React Hook Form and Zod validate it; it sends POST or PUT.
• Row actions use shadcn/ui: details and editing open in a dialog, and deleting asks for confirmation first, then sends a DELETE request.
• Screen states come ready with shadcn/ui: loading, error and empty list.
• Tests use Vitest, Testing Library and MSW; 6 test files come ready.

What lands in your project?

Based on your choices above, npx virastack add users adds these files to your project.

No page is created; add the module to your own page with the steps above.

How do you use it?

Moving to your API

In .env.local, set NEXT_PUBLIC_API_URL on Next.js or VITE_API_URL on TanStack Start to your API's address. If your responses differ, adapt these: api, schemas, constants, to-user-body, UsersTable, UserForm and the tests.

The code is yours

The module is copied into your project, so you don't depend on a package. Change it however you like; if you don't want it, run npx virastack remove users.