Installation

Install the Cascade packages alongside the shadcn integration you already use.

✅ Supports React 17, 18, and 19 • Works with Next.js 13+ App Router • TypeScript ready

Package managers

pnpm add cascade-cards cascade-cards-core cascade-cards-source-markdown

Need external data? Add cascade-cards-source-rest for the REST helper or bring your own integration-first data source.

Import Styles

Import the CSS file once in your app (typically in your root layout or main entry point):

// In your layout.tsx or _app.tsx
import "cascade-cards/styles.css";

No Tailwind plugin required. The CSS includes all animations and base styles.

Next.js App Router Setup

For Next.js 13+ App Router, create a client wrapper component since HoverKitProvider uses React Context:

// components/providers/HoverKitWrapper.tsx
"use client";

import { HoverKitProvider } from "cascade-cards";

export function HoverKitWrapper({ 
  children, 
  sources 
}: { 
  children: React.ReactNode;
  sources: any[];
}) {
  return (
    <HoverKitProvider sources={sources}>
      {children}
    </HoverKitProvider>
  );
}

Then use this wrapper in your server component layout.