Back to components
ComponentAI & ChatFree
Saved Facts Drawer React component
A memory drawer with searchable categorized facts, add and edit forms, reversible deletion and keyboard-accessible modal controls.
About the Saved Facts Drawer component
A memory drawer with searchable categorized facts, add and edit forms, reversible deletion and keyboard-accessible modal controls.
When to use it
Let people inspect and curate the context their assistant remembers.
Manage a small library of personal, work and preference facts.
Installation
Add the Saved Facts Drawer component to your project with the shadcn CLI. It lands in components/saved-facts-drawer.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/saved-facts-drawerOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-merge radix-uiProps
<SavedFactsDrawer /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| initialFacts | { id: string; text: string; category: "Personal" | "Work" | "Preferences" }[] | seed |
| defaultOpen | boolean | false |
| onFactsChange | (facts: SavedFact[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- initialFacts{ id: string; text: string; category: "Personal" | "Work" | "Preferences" }[]Default: seed
- defaultOpenbooleanDefault: false
- onFactsChange(facts: SavedFact[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Saved Facts Drawer FAQ
- Are facts saved permanently?
- Facts live in local state initialized by initialFacts. Persist updates using onFactsChange and provide the saved data on the next mount. This component does not connect to an AI memory service.
- Can I undo a deletion?
- Yes. The drawer offers Undo delete for the last removed fact, preserving its original position. The dialog supports Escape, focus trapping and return focus to its trigger.
