MemoryList

Stable

A list of what the assistant remembers. Each item can be edited or deleted. Two switches sit on top.

Also known as memories, saved memories, memory settings

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Pause memory

Stop saving new memories. Existing ones stay.

Search past chats

Let replies draw on earlier conversations.

WorkAll chats
Leads a team of six designers.
Launch planThis project
Beta ships on the first Monday of November.

<MemoryList
  entries={items}
  onEdit={(id, text) => setItems(items.map((m) => (m.id === id ? { ...m, text } : m)))}
  onDelete={(id) => setItems(items.filter((m) => m.id !== id))}
/>

Edits and deletes work in this demo.

Usage Code Design Accessibility

When to use it

The place where people see, fix and remove what the assistant remembers. The two switches sit on top because they change how memory works for everything below them.

Made of: Pause memory switch · Search past chats switch · Memory row · Topic · Where it applies · Edit and delete buttons · Empty message

Use it for

A memory page in settings.
Letting people pause memory, or stop replies drawing on past chats.
Showing where each memory applies, such as all chats or one project.

Not for

Telling people that one thing was just saved: use MemoryNotice.
A chat that saves nothing at all: use PrivateChatBanner.

Do and avoid

Pause memory

Stop saving new memories. Existing ones stay.

Search past chats

Let replies draw on earlier conversations.

TravelAll chats
Prefers aisle seats on flights.
WorkAll chats
Sends invoices on the 1st of each month.

Do. Clear switches on top, then every memory in a list to scan.

Mode

Option B

TravelAll chats
Prefers aisle seats on flights.
WorkAll chats
Sends invoices on the 1st of each month.

Avoid. Switches called Mode and Option B leave people guessing what they do.

Do

Show where each memory applies.
Explain what pausing does to memories already saved.
Add an undo or a confirm step for delete. The list calls onDelete as soon as the button is pressed.

Avoid

Do not hide entries behind a search. Show them as a list people can scan.
Do not rename the switches without saying what they control.
Do not store anything here. Your app keeps the data.

On a phone

The two switches at the top have a 44px tap area, and their descriptions wrap beside them.
Each row keeps its edit and delete buttons at the right, each with a 44px tap area on a touch screen, and the memory text wraps in the space left.
Editing opens a text box that takes focus at once, so the on-screen keyboard appears; the text is 16px so the page does not zoom.

Seen in products

Claude Settings > Memory shows individual topics people can view and edit, with a Generate memory from chats toggle, a pause versus reset choice, a Search and reference chats toggle and a sensitive topics exclusion.
Claude can disable memory for a single chat before the first message. Project-scoped memory is separate.
Claude never saves government IDs or financial account numbers. Memory is on by default on Free, Pro and Max and off on Team and Enterprise.
Character.ai lets people pin a message as a memory, up to 5, and pinned items survive after older messages fall out of context.
Mistral Le Chat has opt-in Memories.

Properties

Prop	Type	Default	Description
entriesrequired	MemoryEntry[]	none	Items with id, optional topic, text and scope.
onEdit	(id: string, text: string) => void	none	Called when an edit is saved.
onDelete	(id: string) => void	none	Called when delete is chosen.
paused	boolean	none	Controlled state of Pause memory.
defaultPaused	boolean	false	Starting state when uncontrolled.
onPausedChange	(paused: boolean) => void	none	Called when the pause switch changes.
searchChats	boolean	none	Controlled state of Search past chats.
defaultSearchChats	boolean	true	Starting state when uncontrolled.
onSearchChatsChange	(on: boolean) => void	none	Called when the search switch changes.
emptyState	ReactNode	none	Replaces the empty message.
pauseLabel	string	"Pause memory"	Label of the pause switch.
pauseDescription	string	none	Helper text under the pause label.
searchLabel	string	"Search past chats"	Label of the search switch.
searchDescription	string	none	Helper text under the search label.
className	string	none	Extra classes on the wrapper.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one MemoryList switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.

MemoryList in Figma: each property and the React prop it sets
Figma property	React	Values
Paused	`paused`	On or off
Search chats	`searchChats`	On or off

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

paused: Turn on the Pause memory switch (or pass paused) to stop saving new memories while keeping existing ones.
past chats off: Turn off the Search past chats switch (or pass searchChats false) to stop replies drawing on earlier conversations.
editing: Pressing the edit button turns that entry into a text box with Save and Cancel; Save is disabled when the text is empty.
empty: With no entries, a dashed box shows emptyState or a default message.

Tokens

Change one of these and every part that uses it follows.

--surface
--border
--border-strong
--fg-muted
--radius-field
--radius-card

Editable list