Skip to main content

Widgets

Reusable containers for displaying key metrics and data.

Overview​

Widgets are the primary way to display information on a LibreApps Desktop dashboard. They provide a consistent container for charts, tables, and other data visualization elements.

Key Features​

  • Consistent Styling: All widgets share a common look and feel, ensuring a cohesive dashboard.
  • Flexible Content: Can contain anything from a simple number to a complex interactive chart.
  • Responsive: Automatically adjust their size and layout based on the screen size.
  • Customizable Headers: Support for titles, descriptions, and action buttons in the header.

Usage​

import { Widget } from '@/components/dashboard/widget';
import { MyChart } from '@/components/charts/my-chart';

export function DashboardPage() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <Widget title="Monthly Revenue" description="Total revenue for the current month">
        <MyChart />
      </Widget>
      <Widget title="Active Users" description="Number of users currently online">
        <div className="text-4xl font-bold">1,234</div>
      </Widget>
    </div>
  );
}

Best Practices​

  • ✅ Do this: Use widgets to organize your dashboard into logical sections.
  • ✅ Do this: Provide clear titles and descriptions for every widget.
  • ❌ Don't do this: Put too much information in a single widget; keep it focused on a specific metric or data point.