Snippet

Snippet is a component that can be used to display inline or multiline code snippets.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

Sizes

Colors

Variants

Custom Symbol

Without Copy

You can hide the copy button by setting the hideCopyButton property to true.

Custom Tooltip

You can customize the tooltip by using the tooltipProps property.

Note: For more information about the Tooltip props, please visit the Tooltip page.

Multiline

Custom Icons

You can customize the copy and copied icons by using the copyIcon and checkIcon properties.

Slots

• base: The base slot of the snippet, it is the main container.
• content: This is the wrapper of the <pre/> slot.
• pre: The <pre/> slot of the snippet. It is used to wrap the code.
• symbol: The symbol wrapper slot.
• copyButton: The copy button slot.
• copyIcon: The copy icon slot.
• checkIcon: The check icon slot.

API

Snippet Props

Snippet Events