# Dashboard Panels

> Panels are customizable components within Directus Insights dashboards.

Panels are customizable components within <product-link product="insights">



</product-link>

 dashboards.

Panels are the building blocks of analytics dashboards, enabling rapid, no-code creation of data visualizations with data from a Directus project. Panels can also contain interactive elements, making them suitable for building custom internal applications within dashboards.

![A panel in the insights module](/img/cd83e252-c23b-4e03-b2f4-dc35cee2d6a7.webp)

<partial content="extensions-app">



</partial>

## Panel Entrypoint

The `index.js` or `index.ts` file exports an object that is read by Directus. It contains properties that control how a panel is displayed within menus, it’s minimum width and height on the dashboard grid, what configurable options will be available to users, and the actual Vue component that will be loaded.

### Entrypoint Example

```js
import { defineInterface } from '@directus/extensions-sdk'
import PanelComponent from './panel.vue';

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    description: 'This is my custom panel!',
    component: PanelComponent,
    minWidth: 12,
    minHeight: 8,
    options: [
        {
            field: 'text',
            name: 'Text',
            type: 'string',
            meta: {
                interface: 'input',
                width: 'full',
            },
        },
    ],
});
```

### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      A unique identifier for this extension.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      The displayed name for this panel in the Data Studio.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      An icon name from the <a href="https://fonts.google.com/icons" rel="nofollow">
        Google Material Icons set
      </a>
      
      . Supports filled and outlined variants.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      A description of this panel shown in the Data Studio. Maximum 80 characters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        component
      </code>
    </td>
    
    <td>
      component
    </td>
    
    <td>
      A reference to the Vue component rendered in the dashboard.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        minWidth
      </code>
    </td>
    
    <td>
      number
    </td>
    
    <td>
      Smallest number of grid units in the dashboard.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        minHeight
      </code>
    </td>
    
    <td>
      number
    </td>
    
    <td>
      Smallest number of grid units in the dashboard.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      array | component
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        preview
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      Inline SVG to display in panel selection drawer.
    </td>
  </tr>
</tbody>
</table>

<partial content="extensions-uid">



</partial>

<partial content="extensions-theme">



</partial>

## Panel Component

The panel component is a Vue component that will be rendered in the Data Studio within a dashboard. Data from the entrypoint are passed in as props.

### Component Example

This example assumes there is an item in the entrypoint’s `options` array with a `field` value of `text`.

```vue
<template>
    <div class="text" :class="{ 'has-header': showHeader }">
        {{ text }}
    </div>
</template>

<script setup>
defineProps(['showHeader', 'text']);
</script>

<style scoped>
.text {
    padding: 12px;
}

.text.has-header {
    padding: 0 12px;
}
</style>
```

### Props

The panel component will be passed all user configuration options from the entrypoint file. It will also receive the following props:

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      uuid
    </td>
    
    <td>
      The UUID for this panel. This is for a specific instance of the panel and will not be the defined <code>
        id
      </code>
      
       in the entrypoint file.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dashboard
      </code>
    </td>
    
    <td>
      uuid
    </td>
    
    <td>
      The UUID for the dashboard containing the panel.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        showHeader
      </code>
    </td>
    
    <td>
      boolean
    </td>
    
    <td>
      Whether the panel header visibility is enabled in the options.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        width
      </code>
    </td>
    
    <td>
      number
    </td>
    
    <td>
      The current number of grid units wide the panel is.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        height
      </code>
    </td>
    
    <td>
      number
    </td>
    
    <td>
      The current number of grid units high the panel is.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        now
      </code>
    </td>
    
    <td>
      date
    </td>
    
    <td>
      The date object at the time of loading the dashboard.
    </td>
  </tr>
</tbody>
</table>

<partial content="extensions-app-internals">



</partial>