Installation
Usage
import { MorphCard } from "@/components/morph-card"
export function Story() {
return (
<MorphCard
media={<div className="bg-gradient-to-br from-indigo-600 to-emerald-400" />}
eyebrow="Field guide"
title="Chasing the northern lights"
summary="Where to stand and when to look up."
>
<p>The best displays come after midnight.</p>
</MorphCard>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| media | ReactNode | — | Art or a photo; fills the card's top and grows into the story's header (16:9 in both). |
| title | string | — | The card's button label and the story's heading. |
| eyebrow | string | — | A small line above the title. |
| summary | ReactNode | — | Shown on the closed card only. |
| children | ReactNode | — | The story shown once it opens. |
| open / defaultOpen | boolean | — / false | Controlled or initial state. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| headingLevel | 2 | 3 | 4 | 3 | Level of the card's title in your page outline. |
Accessibility
- The card's title is a button with aria-haspopup and aria-expanded; the whole card is its hit area.
- The story is a native modal <dialog> labelled by its title: focus moves in and stays, the page behind is inert, and Escape closes.
- Focus returns to the card, and the page doesn't scroll behind the story.
- Pulling down to close is an extra: the close button, Escape and clicking outside always work.
- Opens and closes in place under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.