# Presets

> Start with a sortable list or a dashboard grid in three lines, then graduate to the full components when you need more.

Source: https://www.flexiboards.dev/docs/presets

Framework: Svelte

Two presets cover the boards people most often ask for. Each is one `FlexiBoard` wrapped around one `FlexiTarget` with the layout already chosen, so the first board you write has nothing to configure. Everything a board or target accepts still reaches them through `config` and `targetConfig`.

## Sortable list

Example: Sortable list

```svelte
<script lang="ts">
	import { FlexiSortable, FlexiWidget } from '@flexiboards/svelte';
</script>

<FlexiSortable class="w-72 gap-2">
	<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Write the docs</FlexiWidget>
	<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Record the demo</FlexiWidget>
	<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Ship it</FlexiWidget>
</FlexiSortable>
```

`FlexiSortable` is a flow grid with one column (`direction="vertical"`, the default) or one row (`direction="horizontal"`). Items pack together and keep their order; drag one onto another and they swap. Widgets are fully draggable unless `config.widgetDefaults` says otherwise.

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `FlexiBoardController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: FlexiBoardController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `direction` | `'vertical' \| 'horizontal'` | Optional. Which way the list runs. Vertical is a column of rows, horizontal a row of columns. Default: `'vertical'`. |
| `key` | `string` | Optional. The target key, used when a layout is exported or imported. Default: `'list'`. |
| `class` | `string` | Optional. Classes for the list's grid element (the place for `gap-*`). |
| `containerClass` | `string` | Optional. Classes for the element wrapping the grid. |
| `boardClass` | `ClassValue` | Optional. Classes for the board's root element. |
| `config` | `FlexiBoardConfiguration<ClassValue>` | Optional. Board configuration merged over the preset's defaults, which make widgets fully draggable. Anything a FlexiBoard accepts: callbacks, registry, layouts. |
| `targetConfig` | `Omit<FlexiTargetPartialConfiguration<ClassValue>, 'layout'>` | Optional. Target configuration merged over the preset's. `direction` fixes the layout, and sizing and widget defaults are yours to set. |
| `children` | `Snippet` | Optional. The list items: FlexiWidget declarations. |

## Dashboard grid

Example: Dashboard grid

```svelte
<script lang="ts">
	import { FlexiDashboard, FlexiWidget } from '@flexiboards/svelte';
</script>

<FlexiDashboard columns={3} rows={2} class="w-96 gap-2">
	<FlexiWidget x={0} y={0} width={2} height={1} class="bg-card rounded-lg border p-3"
		>Revenue</FlexiWidget
	>
	<FlexiWidget x={2} y={0} width={1} height={1} class="bg-card rounded-lg border p-3"
		>Users</FlexiWidget
	>
	<FlexiWidget x={0} y={1} width={1} height={1} class="bg-card rounded-lg border p-3"
		>Churn</FlexiWidget
	>
</FlexiDashboard>
```

`FlexiDashboard` is a free-form grid: widgets sit at coordinates and may leave gaps. `columns` fixes the width, `rows` the starting height, and `maxRows` how far the grid may grow when a widget is pushed down. Pass `resizable` to let widgets be resized from a `FlexiResize` handle.

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `FlexiBoardController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: FlexiBoardController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `columns` | `number` | Optional. Columns in the grid. Default: `4`. |
| `rows` | `number` | Optional. Rows the grid starts with. Default: `3`. |
| `maxRows` | `number` | Optional. Rows the grid may grow to as widgets are pushed down. Default: `rows`. |
| `resizable` | `boolean` | Optional. Let widgets be resized from their FlexiResize handles. Default: `false`. |
| `key` | `string` | Optional. The target key, used when a layout is exported or imported. Default: `'dashboard'`. |
| `class` | `string` | Optional. Classes for the grid element (the place for `gap-*`). |
| `containerClass` | `string` | Optional. Classes for the element wrapping the grid. |
| `boardClass` | `ClassValue` | Optional. Classes for the board's root element. |
| `config` | `FlexiBoardConfiguration<ClassValue>` | Optional. Board configuration merged over the preset's defaults. |
| `targetConfig` | `Omit<FlexiTargetPartialConfiguration<ClassValue>, 'layout'>` | Optional. Target configuration merged over the preset's. The layout comes from `columns`, `rows` and `maxRows`. |
| `children` | `Snippet` | Optional. The tiles: FlexiWidget declarations with `x`, `y`, `width`, `height`. |

## When to move on

A preset is a board with one target, so it stops fitting the moment you want two lists that trade items, a header above the grid, or a target that is not the whole board. The move is mechanical: the preset's `config` becomes the `FlexiBoard` config, `targetConfig` plus the layout from the table above becomes the `FlexiTarget` config, and the children stay as they are. See [Flow Grids](https://www.flexiboards.dev/docs/flow-grids), [Free-Form Grids](https://www.flexiboards.dev/docs/free-form-grids) and [Multiple Targets](https://www.flexiboards.dev/docs/multiple-targets).