Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Widget Embed Settings Block

Animated React widget embed settings page for Next.js with script snippet preview, color customization, position selection, and allowed domains management using shadcn/ui, Tailwind CSS, and framer-motion

Configure and deploy embeddable widgets with this React and Next.js settings block. Preview the embed script snippet, customize widget colors and position, manage allowed domains for CORS, and toggle visibility -- all with smooth staggered entrance animations. Built with TypeScript, shadcn/ui Input, Switch, Select, and Button, Tailwind CSS, and framer-motion.

React Widget Embed Settings Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.