Visible, removable facts an agent retains about the user or ongoing work.
import { useEffect, useState } from 'react'
import Memory, { MemoryItem } from '@/components/ui/memory'
const initialMemories: MemoryItem[] = [
{ id: 'package-manager', category: 'Project', value: 'Uses pnpm' },
{ id: 'design', category: 'Design', value: 'Prefers neutral colors' },
{ id: 'stack', category: 'Stack', value: 'TanStack Start and Tailwind CSS' },
]
export default function Demo() {
const [items, setItems] = useState(initialMemories)
return (
<Memory
className="w-full max-w-lg"
items={items}
onAdd={() =>
setItems((current) => [
...current,
{
id: `memory-${current.length + 1}`,
category: 'Style',
value: 'Avoids borders on buttons',
},
])
}
onRemove={(id) => setItems((current) => current.filter((item) => item.id !== id))}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.