Cascade Cards Documentation

Build CK3-style hover knowledge into your product. These docs run on Cascade itself—hover the highlighted terms below to explore cards while you read.

Start the quickstart →Visit marketing site

Why Cascade

Cascade lets you ship hover knowledge without building a custom engine. Give your users lightweight docs that feel like a game wiki instead of a static FAQ.

Every card can link to another card, letting folks spiral through a knowledge web just like CK3 or Baldur's Gate. Your own docs can double as the demo.

Works side-by-side with shadcn/ui components you already ship.

Docs structure

Installation — pnpm, npm, yarn tabs
Quick Start — wrap provider + add HoverTerm
API Reference — provider props & data sources
Showcase — interactive hover demos

Install Cascade

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

Need REST or custom data? Try cascade-cards-source-rest.

Quick scaffold

Follow the quickstart to light up your first hover card:

// app/providers.tsx
import { HoverKitProvider } from 'cascade-cards';
import { markdownSource } from 'cascade-cards-source-markdown';

const docsSource = markdownSource({ glob: 'content/docs/**/*.md' });

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

Drop <HoverTerm> wherever you want inline knowledge, like you see across these docs.

Interactive knowledge web

Chain cards together with links or inline terms so readers can follow curiosity without leaving the page.

shadcn-native styling

Compose Cascade with Card, Tabs, Alert, and other shadcn/ui primitives you already use.

Docs as demo

Every hover in this documentation is powered by Cascade, so customers experience the product as they read.