# Resizer

> Resize widgets with a small, theme-aware handle.

> **Registry preview.** The registry is currently in preview. We'd love your feedback. [Share feedback on GitHub](https://github.com/Blakintosh/svelte-flexiboards/issues).

Source: https://www.flexiboards.dev/docs/registry/resizer

Framework: Svelte

A styled [FlexiResize](https://www.flexiboards.dev/docs/components/resize) button for use inside a `FlexiWidget`. Install it from the registry, then import the copied source from your app.

## Preview

```svelte
<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.

```shell
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:

```svelte
<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](https://www.flexiboards.dev/docs/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.