# Post Card

Feed post with author row, photo, carousel, video or link preview, and a caption that expands in place. Double-tap the photo and a heart appears there, then travels into the like button.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/post-card
```

## Import

```tsx
import { PostCard } from "@/components/ui/post-card/post-card";
```

## Variants

- `link` — Link preview: `npx @lumioui/cli add pro/post-card-link`
- `photo` — Photo feed: `npx @lumioui/cli add pro/post-card-photo`
- `thread` — Text thread: `npx @lumioui/cli add pro/post-card-thread`
- `video` — Creator video: `npx @lumioui/cli add pro/post-card-video`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `author` | `PostAuthor` | — |
| `subtitle?` | `string` | Location, "Sponsored", community name… under the author (feed layout). |
| `time?` | `string` | Relative timestamp — "2h", "Oct 3". |
| `text?` | `string` | Caption (feed) or body (thread). |
| `media?` | `PostMedia` | — |
| `layout?` | `"feed" | "thread"` | feed — header, full-width media, actions, caption. thread — avatar  column, text-first body, compact actions with repost. |
| `captionLines?` | `number` | Lines the caption shows before "more". Default 2 (feed), 6 (thread). |
| `likes?` | `number` | — |
| `liked?` | `boolean` | — |
| `defaultLiked?` | `boolean` | — |
| `onLikedChange?` | `(liked: boolean) => void` | — |
| `likedBy?` | `PostLikedBy[]` | "Liked by noor.k and 1,283 others" with a face stack (feed only). |
| `comments?` | `number` | — |
| `onCommentPress?` | `() => void` | — |
| `shares?` | `number` | — |
| `onSharePress?` | `() => void` | — |
| `saved?` | `boolean` | — |
| `defaultSaved?` | `boolean` | — |
| `onSavedChange?` | `(saved: boolean) => void` | — |
| `reposts?` | `number` | Thread layout: repost toggle + count. |
| `reposted?` | `boolean` | — |
| `defaultReposted?` | `boolean` | — |
| `onRepostedChange?` | `(reposted: boolean) => void` | — |
| `threadLine?` | `boolean` | Thread layout: draws the rail down from the avatar to the next post. |
| `onAuthorPress?` | `() => void` | — |
| `onMorePress?` | `() => void` | — |
| `onMediaPress?` | `() => void` | Single tap on photo/carousel media (fires after the double-tap window). |
| `onPlayingChange?` | `(playing: boolean) => void` | Video poster play / pause. |
| `onLinkPress?` | `(url: string) => void` | Link preview tap. |
| `className?` | `string` | — |

## Icons rendered

- `message-circle` — /icons.html?i=message-circle
- `repeat` — /icons.html?i=repeat
- `send` — /icons.html?i=send
- `more-horizontal` — /icons.html?i=more-horizontal
- `bookmark` — /icons.html?i=bookmark
- `play` — /icons.html?i=play

Source: https://lumioui.com/components/post-card