React Dialog Block Search Replace

Find and replace text efficiently with powerful options. This React search and replace dialog provides separate search and replace input fields, match options including case sensitivity and whole word matching, live occurrence count display, and replace one or replace all functionality. Built with shadcn/ui Dialog, Input, Button, Checkbox, Badge, and Label components using Tailwind CSS, users perform text replacements with precision and confidence. Enter search term, configure options, replace matches—perfect for text editors, code editors, CMS platforms, or any Next.js application where users need to find and replace content across documents or code files.

React Dialog Block Search Replace preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-search-replace.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-search-replace.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-search-replace.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-search-replace.json

Related Components

FAQ