Checkpoint

A simple component for marking conversation history points and restoring the chat to a previous state.

What is React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.

How does component state work?

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/checkpoint.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/checkpoint

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the container
`children`	`Snippet`	-	Child components (CheckpointIcon, CheckpointTrigger)
`...restProps`	`HTMLAttributes<HTMLDivElement>`	-	All other div props are supported

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the icon
`children`	`Snippet`	-	Custom icon content (overrides default icon)
`size`	`number`	`16`	Size of the icon in pixels

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the button
`children`	`Snippet`	-	Button content
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'ghost'`	Button variant style
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'sm'`	Button size
`tooltip`	`string`	-	Optional tooltip text to display on hover
`onclick`	`(e: MouseEvent) => void`	-	Click handler function
`disabled`	`boolean`	`false`	Whether the button is disabled