2 variants

Cards

Compact standalone cards with clear information hierarchy, purposeful actions, and polished motion.

Balance card

A stacked, two layer balance card with overlapping linked account marks, a large animated total, and a footer holding two actions.

Total balance

+$62.10 today

usage.tsx

import { BalanceCard } from "@/components/registry/balance-card";

export function AccountSummary() {
  return (
    <BalanceCard
      tone="violet"
      balance={12480}
      changeToday={62.1}
      onMove={() => router.push("/transfer")}
      onSend={() => router.push("/send")}
    />
  );
}

"use client";

import { ArrowUp, Repeat2 } from "lucide-react";
import { NumberTicker } from "@/components/number-ticker";
import { cn } from "@/lib/utils";

export interface BalanceCardProps {
  /** Linked accounts, shown as overlapping marks above the total. */
  accounts?: { label: string; color: string }[];
  /** Total balance in dollars. */
  balance?: number;
  /** Change so far today, in dollars. Negative shows a red line. */

106 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/balance-card

Props

accounts{ label: string; color: string }[]Default four sample accounts

Linked accounts, drawn as overlapping marks above the total. color is a Tailwind background class.

balancenumberDefault 12480.62

The total, rolled into place by the ticker whenever it changes.

changeTodaynumberDefault 62.1

Change so far today, in dollars. A negative value prints in the destructive color.

tone"violet" | "neon" | "warning" | "accent"Default "violet"

Color of the panel peeking out behind the card.

onMove() => void

Called when Move is pressed.

onSend() => void

Called when Send is pressed.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

Profile card

A two layer profile card with a color banner, a live looking availability dot, avatar led identity, and two contact actions.

Jordan LeeDesign engineer · Northline StudioAvailable for work

usage.tsx

import { ProfileCard } from "@/components/registry/profile-card";

export function TeamMember() {
  return (
    <ProfileCard
      name="Jordan Lee"
      role="Design engineer"
      company="Northline Studio"
      tone="neon"
      localTime="9:41 PM"
      onMessage={openThread}
      onEmail={openComposer}
    />
  );
}

"use client";

import { Mail, MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ProfileCardProps {
  name?: string;
  /** Job title. Not called `role`: that is the ARIA attribute, and every a11y linter would flag it on the way past. */
  jobTitle?: string;
  company?: string;
  /** Photo shown in the avatar circle. */
  avatarSrc?: string;

105 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/profile-card

Props

namestringDefault "Jordan Lee"

Shown under the avatar.

jobTitlestringDefault "Design engineer"

Not called role, because that is the ARIA attribute and every a11y linter flags it on the way past.

companystringDefault "Northline Studio"

Printed after the job title.

avatarSrcstringDefault a placeholder photo

Photo for the avatar circle.

availablebooleanDefault true

Drives both the status dot and the line of text under the name.

localTimestring

Already formatted, such as 9:41 PM. Left off, the corner pill is not drawn at all.

tone"violet" | "neon" | "warning" | "accent"Default "neon"

Color of the panel peeking out behind the card.

onMessage() => void

Called when Message is pressed.

onEmail() => void

Called when Email is pressed.

classNamestring

Merged last, so anything passed here wins over the component's own classes.