Installation
Usage
<script setup lang="ts">
import { PolaroidCard, type PolaroidCardImage } from "@/components/polaroid-card";
const image: PolaroidCardImage = {
src: "/images/studio-desk.jpg",
alt: "Studio desk with open notebooks",
};
</script>
<template>
<PolaroidCard
:image="image"
caption="Studio notes"
rotation="right"
/>
</template>App-Owned Media
PolaroidCard owns the photo-paper styling, rotation, caption rendering, and optional hover movement. Your app owns image storage, image optimization, alt text, captions, ordering, links, lightboxes, and gallery layout.
When caption is omitted, the component renders image.alt as the visible caption. Pass an explicit caption when the display label should differ from the accessible image description.
Use :interactive="false" when the card appears in a dense static layout or inside another interactive surface.
Examples
Default
Static Card
<PolaroidCard
:image="image"
rotation="none"
:interactive="false"
/>API Reference
Props
Types
interface PolaroidCardImage {
src: string;
alt: string;
}