Snippet

Beta

Code/text snippet container with themed variants and built-in copy action.

Installation

npm install @xaui/native

Import

import { Snippet } from '@xaui/native/snippet'

Basic Usage

Minimal example showing the component with its default configuration.

import { Snippet } from '@xaui/native/snippet'

export function Example() {
  return <Snippet />
}

Basic

Simple snippet with default copy action in the top-right corner.

import { Snippet } from '@xaui/native/snippet'

export function BasicExample() {
  return <Snippet value="pnpm add @xaui/native" />
}

Variants

Outlined, flat, and light styles.

import { Snippet } from '@xaui/native/snippet'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  const command = 'pnpm add @xaui/native'

  return (
    <Column gap={10}>
      <Snippet value={command} variant="outlined" />
      <Snippet value={command} variant="flat" />
      <Snippet value={command} variant="light" />
    </Column>
  )
}

Theme Colors

Use semantic colors with the same variant.

import { Snippet } from '@xaui/native/snippet'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  const colors = ['primary', 'secondary', 'success', 'warning', 'danger', 'default'] as const

  return (
    <Column gap={10}>
      {colors.map(color => (
        <Snippet
          key={color}
          value={`echo "${color}"`}
          themeColor={color}
          variant="outlined"
        />
      ))}
    </Column>
  )
}

Copy Button Positions

Place the copy button on any corner using copyButtonPosition.

import { Snippet } from '@xaui/native/snippet'
import { Column } from '@xaui/native/view'

export function PositionsExample() {
  const value = 'npm run build'

  return (
    <Column gap={10}>
      <Snippet value={value} copyButtonPosition="top-right" />
      <Snippet value={value} copyButtonPosition="top-left" />
      <Snippet value={value} copyButtonPosition="bottom-right" />
      <Snippet value={value} copyButtonPosition="bottom-left" />
      <Snippet value={value} copyButtonPosition="inline-right" />
      <Snippet value={value} copyButtonPosition="inline-left" />
    </Column>
  )
}

Hide Copy Label

Show only the icon on the copy button with hideCopyLabel.

import { Snippet } from '@xaui/native/snippet'
import { Column } from '@xaui/native/view'

export function HideCopyLabelExample() {
  const value = 'pnpm add @xaui/native'

  return (
    <Column gap={10}>
      <Snippet value={value} hideCopyLabel copyButtonPosition="inline-right" />
      <Snippet value={value} hideCopyLabel copyButtonPosition="top-right" />
    </Column>
  )
}

Typography Control

Tune snippet text rendering with fontSize and fontWeight.

import { Snippet } from '@xaui/native/snippet'
import { Column } from '@xaui/native/view'

export function TypographyExample() {
  const command = 'pnpm --filter @xaui/native build'

  return (
    <Column gap={10}>
      <Snippet value={command} fontSize={13} fontWeight="400" />
      <Snippet value={command} fontSize={16} fontWeight="600" />
      <Snippet value={command} fontSize={18} fontWeight="700" />
    </Column>
  )
}