AI Interfaces

Model Switcher

A segmented control for fast, smart, and deep model modes.

modelswitchercontrol

Installation

Copy and paste the code into your project.

Accessibility notes

For production, manage selected state and expose it with aria-pressed or radio semantics.

Preview accent

TypeScript

const models = ["fast", "smart", "deep"];

export function ModelSwitcher() {
  return (
    <div className="inline-flex rounded-full border border-white/12 bg-[#0b0f14]/80 p-1">
      {models.map((model) => (
        <button
          key={model}
          className={model === "smart" ? "rounded-full bg-[#40E0D0] px-3 py-1.5 text-xs font-semibold text-[#0b0f14]" : "rounded-full px-3 py-1.5 text-xs font-semibold text-slate-400 transition hover:text-white"}
          type="button"
        >
          {model}
        </button>
      ))}
    </div>
  );
}

Usage

<ModelSwitcher />

Related components

I can turn that product brief into a component map, then draft the first screen.

AI Interfaces

Streaming Response Bubble

Beginner

A conversational response card with subtle animated streaming indicators.

streamingchatresponse

View component

1Parse brief
2Create variants
3Ship preview

AI Interfaces

Agent Step Timeline

Intermediate

A simple ordered timeline for AI agents, build systems, and workflow progress.

agenttimelinesteps

View component

Grounded responses should show the trail back to source material.

Source · docs/agent-interface.md

AI Interfaces

Source Citation Card

Beginner

A citation card for grounded AI responses and research-backed interfaces.

sourcecitationai

View component