Snippet

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

Storybook@nextui-org/snippetSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀


Installation

npx nextui-cli@latest add snippet
The above command is for individual installation only. You may skip this step if @nextui-org/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

AttributeTypeDescriptionDefault
childrenReactNode | ReactNode[]The content of the snippet.-
sizesm | md | lgThe size of the snippet.md
radiusnone | sm | md | lgThe radius of the snippet.lg
symbolstring | ReactNodeThe symbol to show before the snippet.$
timeoutnumberThe time in milliseconds to wait before resetting the clipboard.2000
codeStringstringThe code string to copy. if codeString is passed, it will be copied instead of the children.-
tooltipPropsTooltipPropsThe props of the tooltip.-
copyIconReactNodeThe copy icon.-
checkIconReactNodeThe check icon.-
disableTooltipbooleanWhether to disable the tooltip.false
disableCopybooleanWhether to disable the copy button.false
hideCopyButtonbooleanWhether to hide the copy button.false
hideSymbolbooleanWhether to hide the symbol.false
copyButtonPropsButtonPropsThe props of the copy button.-
disableAnimationbooleanWhether to disable the animations.false
classNamesRecord<"base"|"content"|"pre"|"symbol"|"copyButton"|"checkIcon", string>Allows to set custom class names for the snippet slots.-

Snippet Events

AttributeTypeDescription
onCopy(value: string | string[]) => void;Handler that is called when the code is copied.