Registry / Page 03·06

Resizer

Resize widgets with a small, theme-aware handle.

A styled FlexiResize 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 Resizer from '$lib/components/flexi-handles/resizer.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"
>
<Resizer label="Resize notes" class="absolute bottom-1 right-1" />
<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-resizer.json

Usage

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

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

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

API

Prop	Default	Purpose
`label`	`Resize 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`	Diagonal resize icon	Replace the icon with a snippet. The accessible label is retained.

Behavior and keyboard access

Enable widget resizing with resizability="both", "horizontal", or "vertical". The Dashboard registry root enables both axes by default. Merely adding a handle does not enable resizing.

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.