GWAN.DEV
GWAN.DEV
HomeDocumentationThemesBlog

Foundations

Icons

Actions

Buttons

Form Controls

Input

Text Area

Select Dropdown

Filter Dropdown

Checkbox

Radio Button

Switch

File Uploader

Color Picker

Multi Select

Search Input

Slider

OTP Input

Date Picker

Time Picker

Date Range Picker

Data Display

Table

Pagination

Progress Bar

Stat Card

Circular Progress

Navigation

Side Menu

Menu Bar

Tabs

Breadcrumb

Ellipsis

Content & Layout

Card

Divider

Banner

Carousel

Accordion

Timeline

Stepper

List

Overlays

Modal

Drawer

Popover

Command Palette

Dropdown Menu

Context Menu

Indicators

Tags

Chips

Badge

Avatar

Avatar Group

Tooltip

Skeleton

Spinner

Feedback

Snackbar

Alert

Callout

State

Stat Card

Playground

Revenue

$48,210

↑ +12% vs last month

Content
string

What the number measures.

Default—
string | number

The headline number, formatted as you want it shown.

Default—
STAT_TREND

Direction arrow and colour for the trend label.

Default—
string

Text next to the trend arrow.

Default—
ReactNode

Icon in the card header, beside the label.

Default—
Advanced
string

Extra classes on the card.

Default""
Usage
import { StatCard, STAT_TREND, MoneySVG } from "gwan-design-system";

<StatCard
  label="Revenue"
  value="$48,210"
  trend={STAT_TREND.UP}
  trendLabel="+12% vs last month"
  icon={<MoneySVG />}
/>