Mode Selector

AI chats 47

About

Standalone mode selector pill button with built-in popover. Bring your own icons or omit them; renders a non-interactive label when given a single mode. Self-contained port from 21st.dev Agent Elements.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mode Selector to your project and fits it to your theme.

Code

How Mode Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ModeSelector, type ModeOption } from "@/components/ui/mode-selector";
import { IconInfinity, IconListCheck } from "@tabler/icons-react";

const modes: ModeOption[] = [
  {
    id: "agent",
    label: "Agent",
    icon: IconInfinity,
    description: "Plan and execute tasks autonomously",
  },
  {
    id: "plan",
    label: "Plan",
    icon: IconListCheck,
    description: "Outline steps before acting",
  },
];

export default function Demo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
      <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950 p-12 w-full max-w-md flex items-center justify-center">
        <ModeSelector modes={modes} defaultValue="agent" />
      </div>
    </div>
  );
}