Panel Extensions

Create custom dashboard panel types

Panels are visualization components for Insights dashboards.

Overview

Directus includes 14+ built-in panel types like metrics, charts, lists, timelines, and more.

Creating a Panel

npm init directus-extension
# Select "panel" as the extension type

Panel Structure

import { definePanel } from '@directus/extensions-sdk';

export default definePanel({
  id: 'my-panel',
  name: 'My Panel',
  icon: 'bar_chart',
  description: 'A custom panel',
  component: PanelComponent,
  options: [
    {
      field: 'collection',
      type: 'string',
      name: 'Collection',
      meta: {
        interface: 'system-collection',
        width: 'half',
      },
    },
  ],
  minWidth: 12,
  minHeight: 8,
});

Component Props

interface PanelProps {
  showHeader: boolean;
  width: number;
  height: number;
  // Your custom options
  collection?: string;
}

Next Steps

Displays

Create display components

Modules

Create custom modules