# Board

> Themed primitives for custom grids and multiple drop targets.

> **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/board

Framework: Svelte

Use `Board.Root`, `Target`, and `Item` when a single dashboard or list preset is too restrictive. Targets share one board, so widgets can move between them.

## Preview

```svelte
<script lang="ts">
	import * as Board from '$lib/components/flexi-board';
	const targetConfig = {
		rowSizing: '96px',
		layout: { type: 'flow', flowAxis: 'row', placementStrategy: 'append', columns: 1 }
	} as const;
</script>

<Board.Root class="grid w-full gap-4 sm:grid-cols-2">
	<Board.Target key="planned" config={targetConfig}>
		{#snippet header()}<h3 class="mb-3 text-sm font-medium">Planned</h3>{/snippet}
		<Board.Item class="flex items-center gap-2 p-3"
			><Board.Grabber label="Move write the docs" /><span class="text-sm">Write the docs</span
			></Board.Item
		>
	</Board.Target>
	<Board.Target key="ready" config={targetConfig}>
		{#snippet header()}<h3 class="mb-3 text-sm font-medium">Ready</h3>{/snippet}
		<Board.Item class="flex items-center gap-2 p-3"
			><Board.Grabber label="Move record the demo" /><span class="text-sm">Record the demo</span
			></Board.Item
		>
	</Board.Target>
</Board.Root>
```

## 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-board.json
```

## API

| Part                  | Underlying API                                                        | Defaults                                                                     |
| --------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `Root`                | [FlexiBoard](https://www.flexiboards.dev/docs/components/board)                                  | Theme foreground; widgets fully draggable.                                   |
| `Target`              | [FlexiTarget](https://www.flexiboards.dev/docs/components/target)                                | Muted, bordered container; padded grid with a minimum drop area and `gap-3`. |
| `Item`                | [FlexiWidget](https://www.flexiboards.dev/docs/components/widget)                                | Card surface, border, radius, and grabbed/shadow styles.                     |
| `Grabber` / `Resizer` | [Grabber](https://www.flexiboards.dev/docs/registry/grabber) / [Resizer](https://www.flexiboards.dev/docs/registry/resizer) | Labeled, focus-visible handle buttons.                                       |

Props pass through to the underlying primitive. Controller bindings and onfirstcreate callbacks remain available. Item class functions receive the widget controller.

## Choosing a layout

Configure each target with a [flow grid](https://www.flexiboards.dev/docs/flow-grids) or a [free-form grid](https://www.flexiboards.dev/docs/free-form-grids). Use unique, stable target keys for persistence. Set the target identifier with `key`.

Style the outer target with `containerClass`; `class` styles the grid itself. Put target headings in the `header` snippet so they are rendered outside the widget declarations.

## Behavior

The source wrappers style the underlying Flexiboards components. Use the existing `canDrop`, widget defaults, layout callbacks, and controller APIs for application rules. Explicit configuration overrides the wrappers' defaults.

Resizing is opt-in here: set `resizability="both"` on an item (or through widget defaults) and add a Resizer. Dashboard enables it for you.

## Application layout

Compose targets into your application's board layout. Add your own headings, navigation, and actions around them.

## Motion

Movement uses short CSS transitions by default and respects reduced motion. [Compare presets or disable transitions](https://www.flexiboards.dev/docs/registry/motion).