Skip to main content

Overview

The bot detection component provides a visually engaging radar-style animation that simulates real-time bot detection. It features a scanning radar beam, animated dots representing potential threats, and a glowing pulse effect that highlights detected bots. This component is ideal for security dashboards, authentication flows, or any interface where you want to visualize bot protection in action.

Use cases

  • Security dashboard displays
  • Authentication and sign-up flow illustrations
  • Platform protection visualizations
  • Marketing pages showcasing security features

Installation

npx shadcn add bot-detection

Usage

import BotDetection from "@/components/forgeui/bot-detection";

export default function Example() {
  return (
    <BotDetection
      cardTitle="Bot Detection"
      cardDescription="Experience fewer fraudulent sign-ups with our sophisticated, AI-driven bot detection that constantly adapts, ensuring high accuracy and efficient platform protection."
    />
  );
}

Props

cardTitle
string
default:"Bot Detection"
The title displayed at the bottom of the component.
cardDescription
string
The description text displayed below the title.

Examples

Default usage

import BotDetection from "@/components/forgeui/bot-detection";

export default function DefaultExample() {
  return <BotDetection />;
}

Custom text

import BotDetection from "@/components/forgeui/bot-detection";

export default function CustomTextExample() {
  return (
    <BotDetection
      cardTitle="Advanced Security"
      cardDescription="Our AI-powered bot detection system identifies and blocks malicious traffic before it reaches your platform."
    />
  );
}

Customization

The component uses the following customizable aspects:
  • Animation timing: The radar scan completes a full cycle every 18 seconds, with detection pulses occurring every 3 seconds
  • Color scheme: Uses red colors for threat detection (red-400, red-500) and neutral colors for the background
  • Dimensions: Fixed height of 120 (30rem) and max width of 87.5 (21.875rem)
  • Detection positions: Nine predefined positions are animated in sequence to simulate bot detection
You can customize the appearance by modifying the component’s className or by overriding the styles using Tailwind utilities.

Build docs developers (and LLMs) love