Lightweight inline code display for terminal commands and short code references.

The Snippet component provides a lightweight way to display terminal commands and short code snippets with copy functionality. Built on top of InputGroup, it's designed for brief code references in text.

See scripts/snippet.tsx for this example.

npx ai-elements@latest add snippet

• Composable architecture with InputGroup
• Optional prefix text (e.g., $ for terminal commands)
• Built-in copy button
• Compact design for chat/markdown

See scripts/snippet-plain.tsx for this example.

Prop	Type	Default	Description
code	string	Required	The code content to display.
children	React.ReactNode	-	Child elements like SnippetAddon, SnippetInput, etc.
...props	React.ComponentProps<typeof InputGroup>	-	Spread to the InputGroup component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof InputGroupAddon>	-	Spread to the InputGroupAddon component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof InputGroupText>	-	Spread to the InputGroupText component.

Prop	Type	Default	Description
...props	Omit<React.ComponentProps<typeof InputGroupInput>,	-	Spread to the InputGroupInput component. Value and readOnly are set automatically.

Prop	Type	Default	Description
onCopy	() => void	-	Callback fired after a successful copy.
onError	(error: Error) => void	-	Callback fired if copying fails.
timeout	number	2000	How long to show the copied state (ms).
children	React.ReactNode	-	Custom button content.
...props	React.ComponentProps<typeof InputGroupButton>	-	Spread to the InputGroupButton component.