Black Friday Week: 20% off on all Nuxt UI Pro products from Nov 25 to Dec 2!

DashboardPanelContent

A scrollable container for your DashboardPanel.

Usage

Used inside a DashboardPanel, the DashboardPanelContent provides a scrollable container with some padding to display content such as DashboardCard, DashboardSection or your own custom components.

pages/index.vue
<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Home" />

      <UDashboardPanelContent>
        <UDashboardCard />

        <div class="grid lg:grid-cols-2 gap-4 mt-4">
          <UDashboardCard />
          <UDashboardCard />
        </div>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardPage>
</template>

Props

ui
DeepPartial<{ wrapper: string; }>
{}

Config

{
  wrapper: 'p-4 flex-1 flex flex-col overflow-y-auto'
}