PluginsAdmin Control Panel
Dashboard Widgets
Add a configurable AdminCP dashboard widget from a VitNode plugin with sizing, permissions, and optional settings.
Dashboard widgets are AdminCP plugin extensions. Define the component and register it in the same plugin factory that owns the feature; the host dashboard then discovers it automatically.
Build the widget component
import type { AdminDashboardWidgetProps } from '@vitnode/core/lib/plugin'
export const StatsWidget = ({ settings }: AdminDashboardWidgetProps) => (
<div className="flex flex-col gap-1 p-2">
<span className="text-muted-foreground text-sm">Published notes</span>
<strong className="text-3xl tabular-nums">
{String(settings.total ?? 42)}
</strong>
</div>
)Register it in the existing plugin factory
import { BarChart3Icon } from 'lucide-react'
import { StatsWidget } from './views/admin/widgets/stats-widget'
export const siteNotesPlugin = () =>
buildPlugin({
admin: {
dashboard: {
widgets: [
{
component: StatsWidget,
defaultEnabled: true,
defaultRows: 1,
defaultSpan: 1,
icon: <BarChart3Icon />,
id: 'stats',
},
],
},
},
messages,
pluginId: '@acme/site-notes',
routes,
})The full widget id is namespaced by the plugin, so stats will not collide with
another plugin’s idea of a stats card. A good thing—statistics are dramatic
enough already.
Add a permission or settings UI when needed
Add permission to hide a widget from staff who should not see it. Add
settingsComponent when administrators need to save preferences; both stay in
the plugin alongside the widget.
{
component: StatsWidget,
permission: { module: 'site_notes', permission: 'can_view_stats' },
settingsComponent: StatsSettings,
id: 'stats',
}Widget options
| Option | What it controls |
|---|---|
defaultSpan / defaultRows | Initial grid size from 1 to 3 columns or rows. |
minSpan | Narrowest allowed width. |
defaultEnabled | Whether a new dashboard receives the widget. |
allowMultiple | Whether an admin may place more than one copy. |
permission | Staff permission required to see the widget. |
settingsComponent | Plugin form shown by the widget settings control. |