1 variant

Expanding Card

A card that keeps its size and slides a colored panel out from underneath on hover.

Q3 roadmap

Data Table filters, Action Menu toggles, and two more text animation variants.

usage.tsx

import { ExpandingCard } from "@/components/registry/expanding-card";

export function RoadmapCard() {
  return (
    <ExpandingCard
      title="Q3 roadmap"
      description="What's shipping this quarter."
      href="/roadmap"
      tone="violet"
      reveal={<span>Read the full breakdown</span>}
    />
  );
}

"use client";

import { ArrowUpRight } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

const TONES = {
  violet: "var(--violet)",
  neon: "var(--neon)",
  warning: "var(--warning)",
  accent: "var(--accent)",
} as const;

104 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Props

titleRequiredstring

The card's heading.

descriptionRequiredstring

One or two lines under the heading.

revealReactNode

Content for the panel sliding out from underneath. Text and marks only, never its own buttons, since it is hidden at rest.

revealHeightnumberDefault 64

How far the panel travels, in px. The wrapper reserves exactly this much, so nothing on the page moves.

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

Color of the panel.

hrefstring

Makes the whole card a link. Also what gives the reveal a keyboard path, since focus on the card opens it.

classNamestring

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