Settings Integrations 3 - Webhooks list with add webhook dialogPro
A webhooks settings section listing endpoint URLs with subscribed events, health status and recent success rate, plus an add-webhook dialog with URL input and event checkboxes. Use it in developer settings to let customers receive real-time event notifications.
About Settings Integrations 3
A webhooks settings section listing endpoint URLs with subscribed events, health status and recent success rate, plus an add-webhook dialog with URL input and event checkboxes. Use it in developer settings to let customers receive real-time event notifications.
Settings Integrations 3 is a settings integrations block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 133 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- settings
- webhooks
- developer
- events
- dialog
- endpoints
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add settings-integrations-03Dependencies installed automatically: lucide-react, motion.
Uses: badge, button, checkbox, input, label, reveal, utils.
Usage
import SettingsIntegrations03 from "@/components/blocks/settings-integrations-03"
export default function Page() {
return <SettingsIntegrations03 />
}