> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/directus/directus/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```bash theme={null}
npm init directus-extension
# Select "panel" as the extension type
```

## Panel Structure

```typescript theme={null}
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

```typescript theme={null}
interface PanelProps {
  showHeader: boolean;
  width: number;
  height: number;
  // Your custom options
  collection?: string;
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Displays" icon="eye" href="/extensions/displays">
    Create display components
  </Card>

  <Card title="Modules" icon="grid" href="/extensions/modules">
    Create custom modules
  </Card>
</CardGroup>