3 variants

Expanding Card

Cards that give up more on interaction without shoving the page around. A panel from underneath, a row that widens, and a card that opens in place.

Expanding card

A card that holds its size and slides a colored panel out from underneath itself on hover, instead of growing and shoving its neighbours around.

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;

85 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Panels

A row of panels where the one you point at opens wide and the rest give way. Becomes a stack that opens downward on a phone.

usage.tsx

import { ExpandingPanels } from "@/components/registry/expanding-panels";

export function Process() {
  return (
    <ExpandingPanels
      panels={[
        { id: "plan", eyebrow: "01", title: "Plan", description: "Read the request, write the steps." },
        { id: "build", eyebrow: "02", title: "Build", description: "Run each step in order." },
      ]}
    />
  );
}

"use client";

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

export interface ExpandingPanel {
  id: string;
  title: string;
  description: string;
  /** A short label pinned to the top, such as a number or a category. */
  eyebrow?: string;

96 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Details

A card that opens in place to show the rest. The body opens on a grid track, so whatever sits below it glides down instead of jumping.

Keys never expire on a lifetime plan. Rotate one from the dashboard and the old key stops working within a minute; every project that used it keeps the source it already installed.

usage.tsx

import { ExpandingDetails } from "@/components/registry/expanding-details";

export function Faq() {
  return (
    <ExpandingDetails title="License keys" summary="One key per seat.">
      Keys never expire on a lifetime plan.
    </ExpandingDetails>
  );
}

"use client";

import { Plus } from "lucide-react";
import { type ReactNode, useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface ExpandingDetailsProps {
  title: string;
  /** Always visible, under the title. */
  summary: string;
  /** What opens underneath. Controls are fine here: it is removed from the tab order while closed. */
  children: ReactNode;

84 more lines ship with an easeUI Pro license.

Buy a license

Install

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