React AI Checkpoint

Sometimes you need to let users know "hey, this is a save point" in a conversation—maybe before a big operation, or when they're about to branch off into a different direction. This checkpoint component is exactly that: a subtle visual marker with a bookmark icon and a separator line. You can make it clickable if you want users to actually interact with it (like "restore to this point"), or just use it as a passive indicator. It's intentionally minimal so it doesn't break the conversation flow. We use these for undo/redo systems, conversation branching, and anywhere users might want to rollback. Sits nicely between messages without taking up too much space.

Checkpoint preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/checkpoint.json

npx shadcn@latest add https://www.shadcn.io/r/checkpoint.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/checkpoint.json

bunx shadcn@latest add https://www.shadcn.io/r/checkpoint.json

Related Components

FAQ