Browse all components

Memory Chip UI

A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.

memorychipindicator

Preview

Presets

Props

Variant

Label override

Also takes onClick.

Agent promptClaude Code · Cursor · any agent

Add the Memory Chip UI component from the Scrim UI registry to this project and use it in the configuration described below.

Memory Chip UI — A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.

## 1. Install

```bash
npx shadcn@latest add @scrimui/memory-chip
```

This writes a single file to `components/ui/memory-chip.tsx`. It is plain React + Tailwind with no runtime dependencies — no Radix, no CVA, nothing to add to package.json. If this project does not use the shadcn CLI, copy the source from https://scrimui.dev/components/memory-chip to the same path by hand; nothing in the file depends on shadcn.

## 2. Use it

```tsx
import { MemoryChip } from "@/components/ui/memory-chip";

<MemoryChip
  variant="saved"
  onClick={() => {}}
/>
```

## 3. The configuration that matters

This is the component's "Saved" state — Confirms a memory was stored, right where the assistant used it.

Every prop is at its default value. Keep the call site minimal — do not write out default values.

## 4. Wire the handlers

`onClick` is a stub in the snippet above (`() => {}`). Connect it to this project's own state and data layer instead of shipping the empty function.

Reference: https://scrimui.dev/components/memory-chip

Follows the props below — change a control and the prompt changes with it, so an agent reproduces that configuration instead of the defaults.

Install

npx shadcn@latest add @scrimui/memory-chip

Component source

React + Tailwind component using your shadcn theme. No additional component dependencies.

memory-chip.tsx

"use client";

import * as React from "react";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

export type MemoryChipProps = {
  variant?: "saved" | "on";
  label?: string;
  onClick?: () => void;
  className?: string;
};

/* ------------------------------------------------------------------ */
/* Icons                                                               */
/* ------------------------------------------------------------------ */

function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      width="11"
      height="11"
      {...props}
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/* MemoryChip                                                          */
/* ------------------------------------------------------------------ */

export function MemoryChip({
  variant = "saved",
  label,
  onClick,
  className = "",
}: MemoryChipProps) {
  const saved = variant === "saved";
  const text = label ?? (saved ? "Saved to memory" : "Memory on");

  const Comp = onClick ? "button" : "span";
  return (
    <Comp
      {...(onClick ? { type: "button" as const, onClick } : {})}
      className={`inline-flex h-6 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors ${
        saved
          ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-900/25 dark:text-emerald-300"
          : "border-border bg-card text-muted-foreground"
      } ${onClick ? "cursor-pointer hover:bg-muted" : ""} ${className}`}
    >
      {saved ? <CheckIcon /> : <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" />}
      <span className="truncate">{text}</span>
    </Comp>
  );
}

When to use it

Place the confirmation next to the message that used the memory, so the cause is visible.
Keep it quiet — a permanent status chip is enough; avoid flashing or animations.
Make it clickable when there is somewhere useful to go (the memory panel).

What breaks in production

Confirming every single save — noise teaches users to ignore it.
Using the chip with no destination when it is clickable.
Showing memory status where the user never asked about it (a marketing-style banner).

Related Components

Memory List

The memory panel — every fact the assistant has saved about the user, with the ability to add one or make it forget.

Memory Suggestion

The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it.

Memory Toast

The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories.

Prompt Input

The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.