Skip to main content
UuidCopy displays UUIDs in a shortened format with click-to-copy functionality and optional link actions.

​
Import

import { UuidCopy } from 'popui'

​
Basic Usage

<script lang="ts">
  import { UuidCopy } from 'popui'
</script>

<UuidCopy uuid="550e8400-e29b-41d4-a716-446655440000" />
This displays the UUID in shortened format: 550e...0000

​
Full UUID

Display the complete UUID: 
<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  full={true}
/>

​
Custom Length

Customize the number of characters shown from start and end: 
<script lang="ts">
  import { UuidCopy } from 'popui'
</script>

<div class="space-y-2">
  <!-- Default: 4 prefix + 4 suffix -->
  <UuidCopy uuid="550e8400-e29b-41d4-a716-446655440000" />
  
  <!-- 6 prefix + 6 suffix -->
  <UuidCopy 
    uuid="550e8400-e29b-41d4-a716-446655440000"
    prefixLength={6}
    suffixLength={6}
  />
  
  <!-- 8 prefix + 8 suffix -->
  <UuidCopy 
    uuid="550e8400-e29b-41d4-a716-446655440000"
    prefixLength={8}
    suffixLength={8}
  />
</div>

​
Sizes

<div class="space-y-2">
  <!-- Default size -->
  <UuidCopy uuid="550e8400-e29b-41d4-a716-446655440000" />
  
  <!-- Small size -->
  <UuidCopy 
    uuid="550e8400-e29b-41d4-a716-446655440000"
    small={true}
  />
</div>

​
Dark Theme

<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  dark={true}
/>

​
Right Aligned

<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  rightAlign={true}
/>

​
Compact Mode

Remove border and padding: 
<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  compact={true}
/>

​
Copy Callback

Get notified when the UUID is copied: 
<script lang="ts">
  import { UuidCopy } from 'popui'
  
  function handleCopied(uuid: string) {
    console.log('Copied:', uuid)
    // Show toast notification
  }
</script>

<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  onCopied={handleCopied}
/>
Use as a link with external link icon: 
<script lang="ts">
  import { UuidCopy } from 'popui'
  
  function handleLinkClick(uuid: string) {
    console.log('Link clicked:', uuid)
    // Navigate to detail page
    window.location.href = `/items/${uuid}`
  }
</script>

<UuidCopy 
  uuid="550e8400-e29b-41d4-a716-446655440000"
  link={true}
  onLinkClick={handleLinkClick}
/>

​
In Data Table

<script lang="ts">
  import { DataListItem, UuidCopy } from 'popui'
</script>

<div class="space-y-2">
  <DataListItem label="User ID">
    <UuidCopy uuid="550e8400-e29b-41d4-a716-446655440000" />
  </DataListItem>
  
  <DataListItem label="Order ID">
    <UuidCopy uuid="7c9e6679-7425-40de-944b-e07fc1f90ae7" />
  </DataListItem>
  
  <DataListItem label="Transaction ID">
    <UuidCopy uuid="a5a5a5a5-b6b6-c7c7-d8d8-e9e9e9e9e9e9" />
  </DataListItem>
</div>

​
In DataTable Column

<script lang="ts">
  import { DataTable } from 'popui'
  
  const columns = [
    {
      id: 'id',
      accessorKey: 'id',
      header: 'ID',
      cellType: 'uuid',
      cellConfig: {
        prefixLength: 4,
        suffixLength: 4,
        onCopy: (value) => {
          console.log('Copied:', value)
        }
      }
    },
    {
      id: 'name',
      accessorKey: 'name',
      header: 'Name',
      cellType: 'text'
    }
  ]
  
  const data = [
    { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Item 1' },
    { id: '7c9e6679-7425-40de-944b-e07fc1f90ae7', name: 'Item 2' }
  ]
</script>

<DataTable {data} {columns} />

​
Complex Example

<script lang="ts">
  import { UuidCopy } from 'popui'
  
  const items = [
    {
      id: '550e8400-e29b-41d4-a716-446655440000',
      type: 'Invoice',
      status: 'Active'
    },
    {
      id: '7c9e6679-7425-40de-944b-e07fc1f90ae7',
      type: 'Payment',
      status: 'Pending'
    },
    {
      id: 'a5a5a5a5-b6b6-c7c7-d8d8-e9e9e9e9e9e9',
      type: 'Refund',
      status: 'Completed'
    }
  ]
  
  function handleCopied(uuid: string) {
    console.log('Copied to clipboard:', uuid)
  }
  
  function handleView(uuid: string) {
    console.log('Navigate to:', uuid)
  }
</script>

<div class="space-y-3">
  {#each items as item}
    <div class="flex items-center justify-between p-3 border border-border rounded-lg">
      <div class="flex-1">
        <div class="font-medium">{item.type}</div>
        <div class="text-sm text-gray-500">{item.status}</div>
      </div>
      <UuidCopy 
        uuid={item.id}
        prefixLength={6}
        suffixLength={6}
        link={true}
        onCopied={handleCopied}
        onLinkClick={handleView}
      />
    </div>
  {/each}
</div>

​
All Variants

<script lang="ts">
  import { UuidCopy } from 'popui'
  
  const uuid = '550e8400-e29b-41d4-a716-446655440000'
</script>

<div class="space-y-4 p-4">
  <div>
    <div class="text-sm text-gray-600 mb-1">Default</div>
    <UuidCopy {uuid} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Full UUID</div>
    <UuidCopy {uuid} full={true} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Small</div>
    <UuidCopy {uuid} small={true} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Compact</div>
    <UuidCopy {uuid} compact={true} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Dark</div>
    <div class="bg-gray-800 p-2 rounded">
      <UuidCopy {uuid} dark={true} />
    </div>
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">With Link</div>
    <UuidCopy {uuid} link={true} onLinkClick={(id) => console.log(id)} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Custom Length</div>
    <UuidCopy {uuid} prefixLength={8} suffixLength={8} />
  </div>
  
  <div>
    <div class="text-sm text-gray-600 mb-1">Right Aligned</div>
    <UuidCopy {uuid} rightAlign={true} />
  </div>
</div>

​
Props

​
uuid
string
default:"''"
The UUID string to display and copy.
​
small
boolean
default:"false"
Use smaller text size (text-sm instead of text-base).
​
dark
boolean
default:"false"
Use dark theme with foreground text color.
​
rightAlign
boolean
default:"false"
Align the UUID to the right.
​
prefixLength
number
default:"4"
Number of characters to show from the start of the UUID.
​
suffixLength
number
default:"4"
Number of characters to show from the end of the UUID.
​
full
boolean
default:"false"
Display the complete UUID without shortening.
​
compact
boolean
default:"false"
Remove border, padding, and adjust spacing for compact display.
​
link
boolean
default:"false"
Show external link icon instead of copy icon.
​
onCopied
(uuid: string) => void
Callback function when the UUID is copied to clipboard.
​
onLinkClick
(uuid: string) => void
Callback function when the link icon is clicked (only used when link=true).

​
Behavior

  • Text Click: Clicking the UUID text copies it to the clipboard and triggers onCopied
  • Icon Click:
    • If link={true}: Triggers onLinkClick callback
    • If link={false}: Copies to clipboard and triggers onCopied
  • Formatting: Shows {prefix}...{suffix} format unless full={true}
  • Font: Uses monospace font for better readability

​
Styling

​
Default Style

  • Border with rounded corners
  • Padding: pl-2.5 pr-2 py-[5px]
  • Font: Monospace with tracking-wide
  • Text color: text-foreground-default-secondary

​
Full Mode

  • No border or background
  • Full width display
  • Retains monospace font

​
Compact Mode

  • No border or padding
  • Justified spacing between text and icon
  • Suitable for inline display

Build docs developers (and LLMs) love

Get started for freeTalk to us