Clipboard Manager

Real-world examples showing how to use the selection bubble menu feature

🎮 Interactive Demo

📖 Select text here:

Try selecting this text! Highlight any portion and watch the bubble menu appear above your selection.

Here are some useful things to save:

Email: support@company.com
Phone: +1-555-0123
Code: npm install flowbite-svelte
Promo: SAVE25OFF

"The best interface is one that gets out of your way." - Design wisdom

💾 Your saved items:

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager, type ClipboardItem } from "flowbite-svelte";
  let demoItems: ClipboardItem[] = [];
</script>

<!-- Live Interactive Demo -->
<section class="rounded-lg p-6">
  <h2 class="mb-4 text-2xl font-semibold">🎮 Interactive Demo</h2>
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
    <div class="rounded-lg p-6">
      <h3 class="mb-3 font-semibold">📖 Select text here:</h3>
      <div class="prose prose-sm" id="demo-content">
        <p>
          <strong>Try selecting this text!</strong>
           Highlight any portion and watch the bubble menu appear above your selection.
        </p>
        <p>Here are some useful things to save:</p>
        <ul>
          <li>Email: support@company.com</li>
          <li>Phone: +1-555-0123</li>
          <li>
            Code: <code>npm install flowbite-svelte</code>
          </li>
          <li>Promo: SAVE25OFF</li>
        </ul>
        <blockquote>"The best interface is one that gets out of your way." - Design wisdom</blockquote>
      </div>
    </div>

    <div class="rounded-lg p-6">
      <h3 class="mb-3 font-semibold">💾 Your saved items:</h3>
      <ClipboardManager items={demoItems} enableSelectionMenu={true} selectionTarget="#demo-content" placeholder="Or type here..." storageKey="interactive" />
    </div>
  </div>
</section>

📚 Usage Examples

Basic

Enable Selection Menu

Simplest setup - enable selection on entire page

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<ClipboardManager enableSelectionMenu={true} />

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Targeted

Target Specific Area

Limit selection menu to specific content area using CSS selector using selectionTarget prop.

Use enableSelectionMenu to show selection bubble menu.

Your article content here...

Users can select any text to save it.

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<div id="article-content">
  <p>Your article content here...</p>
  <p>Users can select any text to save it.</p>
</div>

<ClipboardManager enableSelectionMenu={true} selectionTarget="#article-content" storageKey="specific-target" />

Modal

Display the clipboard manager in a modal dialog. Select any text in the paragraph to save it using the selection bubble menu.

Set storageKey to customize the localStorage key name.

<script lang="ts">
  import { ClipboardManager, Button, P } from "flowbite-svelte";

  let clipboardModal = $state(false);
</script>

<Button onclick={() => (clipboardModal = true)}>Show Clips</Button>

<ClipboardManager bind:open={clipboardModal} enableSelectionMenu={true} selectionTarget="#with-modal" storageKey="modal-clipboard" />

<P id="with-modal" class="py-4">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repudiandae. Optio delectus nihil assumenda laborum voluptatum nam illum nobis blanditiis esse sapiente, cumque facere ab
  consequatur. Odit, architecto enim! At!
</P>

Documentation

Documentation Site

Perfect for docs where users need to save commands, code snippets, or API examples

Use items prop to set initial value. Use limit prop to set max items to store.

API Documentation

Select any code snippet or command to save it.

git clone https://github.com/repo.git

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";

  let items = [{ id: 1, text: "npm install package", pinned: true, timestamp: Date.now() }];
</script>

<div class="docs-layout">
  <!-- Documentation content -->
  <div class="prose" id="docs-content">
    <h1>API Documentation</h1>
    <p>Select any code snippet or command to save it.</p>
    <code>git clone https://github.com/repo.git</code>
  </div>

  <!-- Sidebar with clipboard -->
  <aside class="sidebar">
    <ClipboardManager {items} enableSelectionMenu={true} selectionTarget="#docs-content" placeholder="Or paste a command..." limit={30} storageKey="documentation-site" />
  </aside>
</div>

Content

Blog/Article Reader

Let readers save quotes, insights, or key points while reading

Use saveLabel and clearLabel to change labels.

How to Build Better UIs

Select any quote or insight to save for later...

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<article class="mx-auto max-w-4xl">
  <div id="article-body" class="prose">
    <h1>How to Build Better UIs</h1>
    <p>Select any quote or insight to save for later...</p>
    <!-- Article content -->
  </div>
</article>

<!-- Floating clipboard panel -->
<div class="mx-auto w-80">
  <ClipboardManager enableSelectionMenu={true} selectionTarget="#article-body" saveLabel="Add" clearLabel="Clear All!" storageKey="blog-reader" />
</div>

Support

Email Client / Support Dashboard

Quick responses with ability to save new ones from actual emails

Pinned

20 minutes ago

Thank you for contacting us!

Pinned

30 minutes ago

Your order has been shipped.

Pinned

about 1 hour ago

We appreciate your feedback.

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";

  let responses = [
    { id: 1, text: "Thank you for contacting us!", pinned: true, timestamp: Date.now() - 20 * 60 * 1000 },
    { id: 2, text: "Your order has been shipped.", pinned: true, timestamp: Date.now() - 30 * 60 * 1000 },
    { id: 3, text: "We appreciate your feedback.", pinned: true, timestamp: Date.now() - 45 * 60 * 1000 }
  ];
</script>

<div id="email-body">
  <textarea placeholder="Compose email..." class="w-full"></textarea>
</div>

<ClipboardManager items={responses} enableSelectionMenu={true} selectionTarget="#email-body" placeholder="Save new response..." storageKey="email-client" />

localStorage

Save to Store

The saveToStorage prop controls whether the clipboard items are saved to localStorage so they survive page refreshes and browser sessions.

When `saveToStorage=true` (default):

Items are automatically saved to localStorage whenever they change
When you reload the page, all your clipboard items are restored
Data persists across browser sessions

When `saveToStorage=false` :

Items only exist in memory during the current session
Refreshing the page clears all clipboard items
Data is lost when you close the tab

JavaScript Variables

Select important concepts to remember:

let creates block-scoped variables
const creates read-only references
var creates function-scoped variables

My Notes

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<div class="persist-layout">
  <div id="persist-ex" class="persist-layout">
    <h2>JavaScript Variables</h2>
    <p>Select important concepts to remember:</p>
    <ul>
      <li>let creates block-scoped variables</li>
      <li>const creates read-only references</li>
      <li>var creates function-scoped variables</li>
    </ul>
  </div>

  <!-- Student notes -->
  <div class="notes-panel">
    <h3>My Notes</h3>
    <ClipboardManager enableSelectionMenu={true} selectionTarget="#persist-ex" placeholder="Add your own notes..." saveToStorage={false} storageKey="persist-ex" />
  </div>
</div>

Developer

Code Editor with Snippets

Save frequently used code patterns directly from the editor.

Use filterSensitive=false to unblock sensitive data such as password pattern, api token pattern, etc. The component provide default function (see below) to detect sensitive data. However use the detectSensitiveData prop to provide your own logic.

detectSensitiveData=(text) => (/confidential|secret/i).test(text)

This will block texts containing "confidential" or "secret".

Detects common sensitive information (credit cards, passwords, API keys, credentials).
⚠️ Note: These patterns are heuristic and may produce false positives/negatives.
Credit card regex may match any 16-digit sequence, not just valid card numbers
Password regex is intentionally strict (12+ chars, mixed case, digits) and misses many real passwords
API key regex matches any long alphanumeric token (32+ chars), which may catch legitimate IDs
Credential keyword regex may trigger on non-secret words like "token = false"

// Editable area

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";

  let snippets = [
    { id: 1, text: "console.log()", pinned: true, timestamp: Date.now() - 20 * 60 * 1000 },
    { id: 2, text: "async function", pinned: true, timestamp: Date.now() - 30 * 60 * 1000 }
  ];
</script>

<div class="editor-layout">
  <div id="code-editor" class="border p-4">
    <pre><code contenteditable>// Editable area</code></pre>
  </div>

  <div class="snippets-sidebar">
    <ClipboardManager items={snippets} enableSelectionMenu={true} selectionTarget="#code-editor" placeholder="Save code snippet..." maxLength={5000} filterSensitive={false} storageKey="code-editor" />
  </div>
</div>

Advanced

Multiple Content Areas

Use class selector to enable selection across multiple elements

Content area 1 with class="selectable-area"

You can select from this div.

Content area 2 with class="non-selectable-area"

You CAN'T select from this div.

Content area 3 with class="selectable-area"

You can select from this div.

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<!-- Multiple content areas -->
<div class="space-y-2">
  <div class="selectable-area border border-gray-200 bg-green-100 p-4" id="content1">
    <p>Content area 1 with class="selectable-area"</p>
    <p>You can select from this div.</p>
  </div>

  <div class="non-selectable-area border border-gray-200 bg-red-100 p-4" id="content2">
    <p>Content area 2 with class="non-selectable-area"</p>
    <p>You CAN'T select from this div.</p>
  </div>

  <div class="selectable-area border border-gray-200 bg-green-100 p-4" id="content3">
    <p>Content area 3 with class="selectable-area"</p>
    <p>You can select from this div.</p>
  </div>
</div>

<ClipboardManager enableSelectionMenu={true} selectionTarget=".selectable-area" storageKey="multiple-content" />

Selection Only

No Manual Input

Use showInput=false to hide the input box and use only selection menu with custom rendering

JavaScript Variables

Lorem ipsum dolor sit amet consectetur adipisicing elit.

No clipboard items yet.

Select any text and click "Save" to add it here

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<div id="no-manual-input" class="lesson-content">
  <h2>JavaScript Variables</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

<ClipboardManager enableSelectionMenu={true} selectionTarget="#no-manual-input" showInput={false} storageKey="no-manual-input" />

Custom

Custom Empty State

Provide clear instructions for first-time users

JavaScript Variables

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus iste, quis fugit quo sint quasi quam architecto ipsum, ab reprehenderit error eveniet sunt neque atque vero nulla, labore magnam mollitia.

👆

No saved items yet

Highlight any text in the article above
and click "Save to Clipboard" to get started

<script lang="ts">
  import { ClipboardManager } from "flowbite-svelte";
</script>

<div id="custom-empty-state">
  <h2>JavaScript Variables</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus iste, quis fugit quo sint quasi quam architecto ipsum, ab reprehenderit error eveniet sunt neque atque vero nulla, labore
    magnam mollitia.
  </p>
</div>

<ClipboardManager enableSelectionMenu={true} selectionTarget="#custom-empty-state" storageKey="custom-empty">
  {#snippet emptyState()}
    <div class="py-12 text-center">
      <div class="mb-4 text-6xl">👆</div>
      <h3 class="mb-2 text-lg font-semibold">No saved items yet</h3>
      <p class="text-sm text-gray-600">
        Highlight any text in the article above
        <br />
        and click "Save to Clipboard" to get started
      </p>
    </div>
  {/snippet}
</ClipboardManager>

💡 Best Practices

✅ Do

• Target specific content areas
• Use for text-heavy interfaces
• Combine with manual input option
• Show clear visual feedback
• Test on mobile/touch devices

❌ Don't

• Enable on form inputs
• Use for tiny text snippets
• Forget mobile considerations
• Overwhelm with too many features
• Target entire page unnecessarily

🔄 Selection Menu vs Manual Input

👆 Selection Menu

✓ Faster for existing content
✓ No context switching
✓ Natural workflow
✓ Works on mobile

⌨️ Manual Input

✓ Create new snippets
✓ Edit before saving
✓ Paste from external sources
✓ More control

💡 Pro tip: Enable both for maximum flexibility!

Props

Prop	Type	Default	Description
items	ClipboardItem[]	[]	Initial clipboard items
placeholder	string	"Type and save to clipboard"	Input placeholder text
saveLabel	string	"Save"	Label for the save button
clearLabel	string	"Clear All"	Label for the clear all button
limit	number	20	Maximum number of clipboard items to store
saveToStorage	boolean	true	Whether to persist clipboard items to localStorage
toastDuration	number	2000	Duration in milliseconds to show toast notifications
filterSensitive	boolean	true	Whether to filter out sensitive data (credit cards, passwords, etc.)
maxLength	number	10000	Maximum character length for clipboard items
enableSelectionMenu	boolean	false	Enable text selection menu for saving selected text
selectionTarget	string	"body"	CSS selector for elements where selection menu should be enabled
showInput	boolean	true	Whether to show the input field for adding new clipboard items
class	ClassValue	""	Additional CSS classes for the component container
classes	ClipboardManagerVariants	undefined	Object containing CSS classes for component parts
storageKey	string	undefined	Custom localStorage key (defaults to 'flowbite-clipboard-manager')
open	boolean	undefined	Control modal state. If undefined, renders inline; if defined, renders as modal
badgeProps	Omit<BadgeProps, 'children'>	{ color: 'blue', class: 'text-xs' }	Props to pass to the pinned badge component
modalProps	ModalProps	undefined	Props to pass to the modal component when rendering as modal
detectSensitiveData	(text: string) => boolean	undefined	Custom function to detect sensitive data. Overrides default detection
children	Snippet	undefined	Custom render function for clipboard items. Receives item, copyItem, deleteItem, and togglePin
emptyState	Snippet	undefined	Custom render function for the empty state

Clipboard Manager

🎮 Interactive Demo

📖 Select text here:

💾 Your saved items:

📚 Usage Examples

Enable Selection Menu

Target Specific Area

Modal

Documentation Site

API Documentation

Blog/Article Reader

How to Build Better UIs

Email Client / Support Dashboard

Save to Store

When saveToStorage=true (default):

When saveToStorage=false :

JavaScript Variables

My Notes

Code Editor with Snippets

Multiple Content Areas

No Manual Input

JavaScript Variables

Custom Empty State

JavaScript Variables

No saved items yet

💡 Best Practices

✅ Do

❌ Don't

🔄 Selection Menu vs Manual Input

👆 Selection Menu

⌨️ Manual Input

Props

When `saveToStorage=true` (default):

When `saveToStorage=false` :