# Can

> Shows an action only to members who hold a permission key; the checks of one render share one round trip.

Source: https://bettersupabase.com/docs/registry/ui-recipes/can

{/* Generated by scripts/build-recipes.ts from the example apps. Edit the examples or the script, then run `pnpm recipes`. */}

It loads its data on the server through the block's client; the [access block](https://bettersupabase.com/blocks/access) must be installed (`npx better-supabase add access`). Its page on bettersupabase.com is [/recipes/can](https://bettersupabase.com/recipes/can).

Web, with no shadcn components.

```tsx title="apps/examples/nextjs/src/features/projects/components/task-import-action.tsx"
"use client";

import { Can } from "better-supabase/blocks/access/react";

import { permissions } from "@/lib/supabase/blocks.generated";

import { TaskImportDialog } from "./task-import-dialog";

/**
 * The import button, for members with `imports.manage` in the active
 * organization. The `<Can>` checks of one render share one `my_permissions`
 * call; the import action checks the key again on the server.
 */
export function TaskImportAction({ projectId }: { projectId: string }) {
  return (
    <Can permission={permissions.imports.manage}>
      <TaskImportDialog projectId={projectId} />
    </Can>
  );
}
```