Card Statistics

Overview

We have created different versions of card components to make it easier for you to show your statistics neatly.

Card Statistics Horizontal with subtitle

The HorizontalWithSubtitle component enriches the presentation of statistics by incorporating a horizontal layout with additional context provided by subtitles. This component is specifically designed for displaying comprehensive metrics, such as user engagement figures, financial statistics, or any key performance indicators, with an emphasis on changes or trends over time.

This component is placed inside the src/components/card-statistics/HorizontalWithSubtitle.tsx file. You may refer to the src/views/apps/user/list/UserListCards.tsx file for it's usage.

Usage

Here's an example of how to use the HorizontalWithSubtitle component:

import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'

const Component = () => {
  return (
    <HorizontalWithSubtitle
      title="Session"
      subtitle="Total User"
      stats="21,459"
      avatarIcon="ri-user-3-line"
      avatarColor="primary"
      trend="positive"
      trendNumber="29%"
    />
  )
}

export default Component

Props

Prop	Type	Required	Description
title	string	Yes	The title displayed on the card
subtitle	string	Yes	The subtitle displayed on the card
stats	string	Yes	The primary statistic number displayed
avatarIcon	string	Yes	Icon to display inside the avatar
trend	'positive' | 'negative'	Yes	The trend of the statistic
trendNumber	string	Yes	Numerical value indicating the trend
avatarColor	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar

Card Statistics Horizontal with border

The HorizontalWithBorder component is designed to enhance the presentation of statistics by incorporating a horizontal layout with a bordered card design. This component is ideal for displaying comprehensive metrics, such as user engagement figures, financial statistics, or any key performance indicators, with an emphasis on changes or trends over time. The border and shadow effects add a visually appealing dynamic when users interact with the component.

This component is placed inside the src/components/card-statistics/HorizontalWithBorder.tsx file. You may refer to the src/views/apps/logistics/dashboard/LogisticsStatisticsCard.tsx file for its usage.

Usage

Here's an example of how to use the HorizontalWithBorder component:

import HorizontalWithBorder from '@components/card-statistics/HorizontalWithBorder'

const Component = () => {
  return (
    <HorizontalWithBorder
      title='Active Users'
      stats={15278}
      change={12.5}
      avatarIcon='ri-user-line'
      color='success'
    />
  )
}

export default Component

Props

Prop	Type	Required	Description
title	string	Yes	The title displayed on the card
stats	number	Yes	The primary statistic number displayed
trendNumber	number	Yes	The change in the statistic
avatarIcon	string	Yes	Icon to display inside the avatar
color	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar

Card Statistics Horizontal with avatar

The HorizontalWithAvatar component is designed to present statistical data in a horizontal layout, enhanced by a customizable avatar. This component is ideal for showcasing key metrics such as user statistics, performance indicators, or financial data, with an emphasis on visually appealing and informative displays.

This component is located in the src/components/card-statistics/HorizontalWithAvatar.tsx file. For usage examples, refer to the src/views/apps/ecommerce/referrals/HorizontalStatisticsCard.tsx file.

Usage

Here's an example of how to use the HorizontalWithAvatar component:

import HorizontalWithAvatar from '@components/card-statistics/HorizontalWithAvatar'

const ExampleComponent = () => {
  return (
    <HorizontalWithAvatar
      stats='$15,362'
      title='Total Earning'
      avatarIcon='ri-money-dollar-circle-line'
      avatarColor='primary'
      avatarVariant='rounded'
      avatarSkin='light'
      avatarSize={42}
    />
  )
}

export default ExampleComponent

Props

Prop	Type	Required	Description
stats	string	Yes	The statistic value displayed on the card
title	string	Yes	The title displayed on the card
avatarIcon	string	Yes	Icon to display inside the avatar
avatarColor	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar
avatarVariant	'circular' | 'rounded' | 'square'	No	Variant for the avatar
avatarSkin	'light' | 'filled' | 'light-static'	No	Skin for the avatar
avatarSize	number	No	Size of the avatar

Card Customer Statistics

The CustomerStats component is designed to display customer-related statistics in a visually appealing card format. This component is ideal for showcasing key customer metrics, such as customer Account Balance, Wishlist, or any other pertinent customer data, with customizable options for icons, colors, and descriptions.

This component is placed inside the src/components/card-statistics/CustomerStats.tsx file. You may refer to the src/views/apps/ecommerce/customers/details/customer-right/overview/CustomerStatisticsCard.tsx file for its usage.

Usage

Here's an example of how to use the CustomerStats component with value and content props:

import CustomerStats from '@components/card-statistics/CustomerStats'

const CustomerDashboard = () => {
  return (
    <CustomerStats
      title="customer satisfaction"
      avatarIcon="ri-emotion-happy-line"
      color="warning"
      stats="94%"
      content="Satisfaction Rate"
      description="based on recent feedback"
    />
  )
}

export default CustomerDashboard

Here's an example of how to use the CustomerStats component with chipLabel prop:

import CustomerStats from '@components/card-statistics/CustomerStats'

const CustomerDashboard = () => {
  return (
    <CustomerStats
      title="loyalty program"
      avatarIcon="ri-gift-line"
      color="success"
      chipLabel="Platinum member"
      description="3000 points to next tier"
    />
  )
}

export default CustomerDashboard

Props

Prop	Type	Required	Description
title	string	Yes	The title displayed on the card
avatarIcon	string	Yes	Icon to display inside the avatar
description	string	Yes	Description displayed on the card
stats	string	No	The primary statistic number displayed
content	string	No	Additional content displayed on the card
chipLabel	string	No	Label displayed on the chip
color	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar

Card Statistics Horizontal

The CardStatHorizontal component is tailored for presenting statistics in a horizontal layout. It's an ideal choice for showcasing key figures such as customer counts, sales numbers, or any other significant data in a visually appealing and easy-to-read format.

This component is placed inside the src/components/card-statistics/Horizontal.tsx file. You may refer to the src/views/pages/widget-examples/statistics/Horizontal.tsx file for it's usage.

Usage

Here's an example of how to use the CardStatHorizontal component:

// Component Imports
import CardStatHorizontal from '@components/card-statistics/Horizontal'

const Component = () => {
  return (
    <CardStatHorizontal
      title: 'New Customers'
      stats: '2,856'
      icon: 'ri-group-line'
      color?: 'success'
      trendNumber: '25.8%'
      trend?: 'up'
    />
  )
} 

export default Component

Props

Prop	Type	Required	Description
title	string	Yes	The title displayed on the card
stats	string	Yes	The statistic number displayed on the card
icon	string	Yes	Icon to display inside the avatar
trendNumber	string	Yes	Numerical value indicating the trend
color	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar
trend	'up'	No	Direction of the trend (upward or downward)

Card Statistics Vertical

The CardStatVertical component is adeptly designed for vertically-oriented presentation of key statistics. This format is particularly suitable for detailed data display, where additional information such as subtitles and icons enhances the understanding of the metrics.

This component is placed inside the src/components/card-statistics/Vertical.tsx file. You may refer to the src/app/[lang]/(dashboard)/dashboards/ecommerce/page.tsx and src/views/pages/widget-examples/statistics/Vertical.tsx files for it's usage.

Usage

To utilize the CardStatVertical component in your application:

// Component Imports
import CardStatVertical from '@components/card-statistics/Vertical'

<CardStatVertical
  title='Total Profit'
  stats='$25.6k'
  avatarIcon='ri-pie-chart-2-line'
  avatarColor='secondary'
  subtitle='Weekly Profit'
  trendNumber='42%'
  trend='positive'
  moreOptions={{ options: ['Add', 'Edit', 'Delete'] }}
/>

Props

Prop	Type	Required	Description
title	string	Yes	The title displayed at the top of the card
stats	string	Yes	The main statistic number displayed
avatarIcon	string	Yes	Icon displayed inside the avatar
subtitle	string	Yes	A brief description or subtitle
trendNumber	string	Yes	Percentage showing the change in numbers
trend	positive | negative	No	Indicates if the trend is positive or negative
avatarSkin	CustomAvatarProps['skin']	No	Skin style for the avatar (optional)
avatarSize	number	No	Size of the avatar (optional)
avatarColor	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color theme for the avatar (optional)
moreOptions	OptionsMenuType	No	Additional options for the card (optional)

Card Statistics Image

The CardStatWithImage component offers a creative way to feature statistics along with a related image, providing a visual context that enhances the data representation.

This component is placed inside the src/components/card-statistics/Character.tsx file. You may refer to the src/app/[lang]/(dashboard)/dashboards/crm/page.tsx and src/views/pages/widget-examples/statistics/Character.tsx files for it's usage.

Usage

Here's how to implement the CardStatWithImage component in your application:

// Component Imports
import CardStatWithImage from '@components/card-statistics/Character'

<CardStatWithImage
  stats='13k'
  title='Ratings'
  trendNumber='15.6%'
  chipColor='primary'
  src='/images/illustrations/characters/13.png'
  chipText={`Year of ${new Date().getFullYear()}`}
/>

Props

Prop	Type	Required	Description
title	string	Yes	Title displayed above the statistics
stats	string	Yes	Main statistic number displayed
chipText	string	Yes	Text displayed inside the chip
src	string	Yes	Image source URL
trendNumber	string	Yes	Numerical value indicating the trend
trend	'positive' | 'negative'	No	Indicates the trend direction (optional)
chipColor	'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'	No	Color of the chip (optional)