Stop Rebuilding UI

Settings IP Allowlist

Animated React IP allowlist and blocklist settings page for Next.js with CIDR range entries, labels, expiry dates, enable toggle, and rule management built with shadcn/ui, Tailwind CSS, and framer-motion

Scroll to load preview

Secure your application with this React and Next.js IP allowlist settings block. Add IP addresses and CIDR ranges with labels and expiry dates, toggle enforcement on or off, and manage allow and block rules -- all with polished staggered entrance animations. Built with TypeScript, shadcn/ui Input, Switch, Badge, and Button, Tailwind CSS, and framer-motion.

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.