Registry / Page 03·02

Dashboard

Composable, draggable and resizable tiles with your shadcn theme.

Use Dashboard.Root, Item, Header, Content, Grabber, and Resizer to compose a dashboard without adopting a whole application layout. The metrics below are ordinary content, not built-in widget types.

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.

Revenue

$24,560

This month

Subscribers

1,284

Active accounts

<script lang="ts">
import * as Dashboard from '$lib/components/flexi-dashboard';
</script>

<Dashboard.Root columns={2} rows={2} maxRows={4} class="w-full">
<Dashboard.Item x={0} y={0} width={1} height={1}>
<Dashboard.Header
><span class="min-w-0 truncate text-sm font-medium">Revenue</span><Dashboard.Grabber
label="Move revenue"
/></Dashboard.Header
>
<Dashboard.Content
><p class="text-2xl font-semibold">$24,560</p>
<p class="text-muted-foreground mt-1 text-sm">This month</p></Dashboard.Content
>
<Dashboard.Resizer label="Resize revenue" class="absolute bottom-1 right-1" />
</Dashboard.Item>
<Dashboard.Item x={1} y={0} width={1} height={1}>
<Dashboard.Header
><span class="min-w-0 truncate text-sm font-medium">Subscribers</span><Dashboard.Grabber
label="Move subscribers"
/></Dashboard.Header
>
<Dashboard.Content
><p class="text-2xl font-semibold">1,284</p>
<p class="text-muted-foreground mt-1 text-sm">Active accounts</p></Dashboard.Content
>
<Dashboard.Resizer label="Resize subscribers" class="absolute bottom-1 right-1" />
</Dashboard.Item>
</Dashboard.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-dashboard.json

Anatomy

Root owns one free-form target. Declare Item components inside it; put headers, content, and handles inside each item. You can omit either presentation wrapper or replace its contents with your own components.

API

Part	Props and defaults
`Root`	All FlexiDashboard props. Resizing is enabled by default, with 4 columns, 3 rows, 160px row tracks, and `gap-4`.
`Item`	All FlexiWidget props, including coordinates, dimensions, metadata, configuration, and controller access.
`Header`	Ordinary div attributes and children. Aligns a title and actions.
`Content`	Ordinary div attributes and children. Fills remaining space and scrolls overflow.
`Grabber` / `Resizer`	Grabber and Resizer props.

Use class to override styles. Item classes also accept a function of the widget controller. Consumer classes are merged last, including when customizing shadow and grabbed states.

Sizing and responsiveness

Set columns, rows, and maxRows explicitly for your content. Override row tracks with targetConfig={{ rowSizing: '200px' }}. Place a resize handle in each resizable tile; pass resizable={false} to disable resizing for the dashboard.

The default grid is fixed-column, not an automatic breakpoint layout. For different saved layouts at different screen sizes, compose the headless ResponsiveFlexiBoard with targets and these themed items.

Saving layouts

Pass config.onLayoutChange to receive the exported layout, and use the existing import/export APIs. This installable source registry is separate from config.registry, which maps persisted widget types to rendered content.

The underlying SSR and hydration support is unchanged.

Motion

Movement uses short CSS transitions by default and respects reduced motion. Compare presets or disable transitions.