1 variant

Feature Grid

A bento features section. A wide before and after, a card that turns over, and tiles that slide their detail out on hover.

Everything a real screen needs, already wired

Not a box of parts. Whole sections, with the states nobody budgets for handled before they ship.

The screen before the Pro components went in

The same screen after the Pro components went in

YoursWith Pro

Source you own

Real files land in your project

Not a package

Fork any of them on day one. They still look like they belong to the same system.

Motion with a reason

Calm curves, durations matched to distance, and a reduced motion path in every file.

Keyboard first

Focus rings, arrow key navigation and Escape handling are in the component, not on your list.

Dark mode from day one

One set of tokens drives both themes, so nothing reads as an afterthought at night.

page.tsx

import { FeatureGrid } from "@/components/blocks/feature-grid";

export default function Page() {
  return (
    <FeatureGrid
      title="Everything a real screen needs, already wired"
      compare={{
        beforeSrc: "/before.jpg",
        beforeAlt: "The screen before",
        afterSrc: "/after.jpg",
        afterAlt: "The screen after",
      }}
      highlight={{ front: <h3>Source you own</h3>, back: <p>Not a package.</p> }}
      features={[
        {
          title: "Motion with a reason",
          description: "Calm curves and a reduced motion path in every file.",
          tone: "violet",
          href: "/components",
          reveal: <span>See the motion tokens</span>,
        },
      ]}
    />
  );
}

"use client";

import type { ReactNode } from "react";
import { ExpandingCard } from "@/components/registry/expanding-card";
import { FlipCard } from "@/components/registry/flip-card";
import { ImageCompare } from "@/components/registry/image-compare";
import { cn } from "@/lib/utils";

export interface FeatureGridFeature {
  title: string;
  description: string;
  /** Content for the panel that slides out from under the tile. Text and marks only. */

75 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/feature-grid