Skip to main content

DataOverview

The DataOverview component is a flexible, responsive grid or stacked layout for displaying key information with optional icons, titles, and values. It supports custom columns, stacked or inline layout, and fully customizable styling.

import { DataOverview } from "tawuniya";

👉 View in Storybook

PropTypeDefaultDescription
itemsDataOverviewItem[]—Array of items to display. Each item has id, title, value, and icon.
type"inline" | "stacked""stacked"Layout type. "stacked" shows title above value, "inline" shows title and value on row.
classNamesPartial<DataOverviewClassNames>—Custom class names for wrapper, title, value, icon, or item wrapper.

Basic DataOverview (stacked)​

<DataOverview
  items={[
    { id: "1", title: "Customers", value: "120", icon: "user" },
    { id: "2", title: "Revenue", value: "$15k", icon: "network" },
  ]}
/>

Inline Layout​

<DataOverview
  type="inline"
  items={[
    { id: "1", title: "Customers", value: "120", icon: "user" },
    { id: "2", title: "Revenue", value: "$15k", icon: "network" },
  ]}
/>

Custom Class Names​

<DataOverview
  items={[
    { id: "1", title: "Customers", value: "120", icon: "user" },
    { id: "2", title: "Revenue", value: "$15k", icon: "network" },
  ]}
  classNames={{
    wrapperClassName: "bg-gray-50 p-4",
    titleClassName: "text-blue-700",
    valueClassName: "text-green-600 font-bold",
    iconClassName: "text-red-500",
    itemWrapperClassName: "border p-2 rounded-md",
  }}
/>

Features​

  • Stacked & Inline Layouts: Choose between stacked (title above value) or inline (title and value on a row).

  • Custom Icons: Icons can be string names or ReactNode components.

  • Custom Styling: Fully customizable via classNames prop for wrapper, item, title, value, and icon.

  • Fallback Value: Automatically displays "—" if value is empty.