4 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. */

105 more lines ship with an easeUI Pro license.

Buy a license

Install

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

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

Invite card

An invitation to join a team, with the faces already inside and one decision. Accepting swaps the buttons for a confirmation in the same footprint.

Join Northline Design

Maya Okafor invited you as Editor.

usage.tsx

import { InviteCard } from "@/components/registry/invite-card";

export function Invite() {
  return (
    <InviteCard
      team="Northline Design"
      invitedBy="Maya Okafor"
      access="Editor"
      members={[{ name: "Jonas Weber" }, { name: "Priya Raman" }]}
      onAccept={acceptInvite}
    />
  );
}

"use client";

import { Check } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface InviteMember {
  name: string;
  avatarSrc?: string;
}

155 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Folder card

A folder you can see into. The front tips forward on hover and the sheets behind it lift, by transform alone, so a grid of them never reflows.

Brand assets48 files · Edited 2h ago

Launch week12 files · Edited yesterday

Contracts1 document · Edited in May

usage.tsx

import { FolderCard } from "@/components/registry/folder-card";

export function Files() {
  return <FolderCard name="Brand assets" count={48} meta="Edited 2h ago" href="/files/brand" />;
}

"use client";

import { cn } from "@/lib/utils";

export interface FolderCardProps {
  name: string;
  /** How many items are inside, shown under the name. */
  count: number;
  /** Singular noun for the count. Default "file". */
  unit?: string;
  /** When it last changed, such as "Edited 2h ago". */
  meta?: string;

68 more lines ship with an easeUI Pro license.

Buy a license

Install

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