Board
Themed primitives for custom grids and multiple drop targets.
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
Planned
Ready
<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.
npx shadcn-svelte@latest add https://flexiboards.dev/r/svelte/flexi-board.jsonAPI
| Part | Underlying API | Defaults |
|---|---|---|
Root | FlexiBoard | Theme foreground; widgets fully draggable. |
Target | FlexiTarget | Muted, bordered container; padded grid with a minimum drop area and gap-3. |
Item | FlexiWidget | Card surface, border, radius, and grabbed/shadow styles. |
Grabber / Resizer | Grabber / 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 or a free-form grid. 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.