Registry / Page 03·05

Grabber

Move widgets with a small, theme-aware handle.

A styled FlexiGrab button for use inside a FlexiWidget. Install it from the registry, then import the copied source from your app.

Preview

Svelte Example.svelte

Press Enter to grab or resize widgets. Once grabbed, use Arrow keys to move/resize the widget, Enter to confirm the action, or Esc to cancel it.

Notes

<script lang="ts">
import { FlexiDashboard, FlexiWidget } from '@flexiboards/svelte';
import Grabber from '$lib/components/flexi-handles/grabber.svelte';
</script>

<FlexiDashboard
columns={2}
rows={2}
resizable
class="w-full gap-3"
targetConfig={{ rowSizing: '100px' }}
>
<FlexiWidget
x={0}
y={0}
class="bg-card text-card-foreground border-border relative flex items-center gap-3 rounded-xl border p-4"
>
<Grabber label="Move notes" />
<span class="text-sm">Notes</span>
</FlexiWidget>
</FlexiDashboard>

Installation

Start with a Tailwind project configured for shadcn and its theme variables. This copies editable source into your components directory; it does not install a second theme.

npx shadcn-svelte@latest add https://flexiboards.dev/r/svelte/flexi-grabber.json

Usage

The default install location is src/lib/components/flexi-handles/grabber.svelte. Import it in your app:

<script lang="ts">
	import Grabber from '$lib/components/flexi-handles/grabber.svelte';
</script>

The handle is also re-exported from the component families.

API

Prop	Default	Purpose
`label`	`Move widget`	Screen-reader text; use a specific label when several handles are present.
`size`	`16`	Icon size in pixels. The button remains 32px.
`class`	None	Override styles; accepts a widget-state function too.
`children`	Vertical grip icon	Replace the icon with a snippet. The accessible label is retained.

Behavior and keyboard access

A grabber must be inside a draggable widget. All three registry roots enable dragging by default. Once a grabber is mounted, the widget body no longer initiates a drag; the handle does.

Focus the handle and press Enter to start, use arrow keys to move the virtual pointer, press Enter to finish, and Escape to cancel. See Accessibility for the full keyboard model.

These are real non-submit buttons. Don’t nest links, buttons, or inputs inside a handle; put them alongside it. For larger touch targets, override with size-11.

Styling

Colors come from muted-foreground, accent, accent-foreground, and ring. No hard-coded palette or dark-mode override is installed. The defaults inherit your existing shadcn theme.