Browse components

Tool Approval

Allow once, remember, or deny a paused tool call.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/tool-approval.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/tool-approval.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/tool-approval.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/tool-approval.

Import

import {  ToolApproval,  ToolApprovalButtons,  ToolApprovalDescription,  ToolApprovalDetails,  ToolApprovalHeader,  ToolApprovalTitle} from "@/components/ui/tool-approval"

example.tsx

import {  ToolApproval,  ToolApprovalButtons,  ToolApprovalDescription,  ToolApprovalDetails,  ToolApprovalHeader,  ToolApprovalTitle,} from "@/components/ui/tool-approval"export function Example() {  return (    <ToolApproval>      <ToolApprovalHeader>        <ToolApprovalTitle>Archive 3 draft conversations?</ToolApprovalTitle>        <ToolApprovalDescription>          This tool can permanently hide drafts.        </ToolApprovalDescription>      </ToolApprovalHeader>      <ToolApprovalDetails>archiveDrafts({ count: 3 })</ToolApprovalDetails>      <ToolApprovalButtons        onAllow={() => undefined}        onAlways={() => undefined}        onDeny={() => undefined}      />    </ToolApproval>  )}

API Reference

ToolApprovalButtons

Prop	Type	Default
onAllow	() => void	—
onAlways	() => void	—
onDeny	() => void	—