JUP printing a clean higher-low. Adding on the retest.
JU
JUP$0.8123▲ +4.20%The feed unit. Composes Avatar + TokenChip + ReactionBar; has a milestone variant.
npx shadcn add @cids/post-cardNone of its own. Motion lives in the embedded `ReactionBar` (spring-pop). Card-level press `scale(0.98)` is intentionally **not** applied here — the card holds interactive children; wrap in a link at the call site if the whole card should navigate.
This component declares no motion.
Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.
import { PostCard } from "@/design-system";
<PostCard
kind="take"
author={{ name: "Mira", handle: "mira", seed: wallet }}
time="4m"
body="JUP printing a clean higher-low."
token={{ symbol: "JUP", price: "$0.8123", change24h: 4.2 }}
reactions={reactions}
onReact={onReact}
/>
<PostCard kind="milestone" direction="up" time="1h"
body="BONK ran +12.4% in 24h." />Resolves in the active theme — flip the toggle above to verify.
--color-surface-container--color-outline-variant--color-brand--color-fg-muted--color-info--color-buy--color-sell--radius-card--radius-controlThe feed unit. Composes Avatar + TokenChip + ReactionBar; has a milestone variant.
Standard (watched / take) Milestone ┌ surface-container, r-8, p-16 ┐ ┌ border-l-2 buy/sell ─┐ │ ◐28 @handle [kind] time │ │ ▲ system copy 14/1.5 │ │ body 14/1.5 │ │ time │ │ [TokenChip] (optional) │ └──────────────────────┘ │ ♥12 🔥8 (ReactionBar) │ no author · leading ▲/▼ └──────────────────────────────┘ in buy/sell · left border
| Prop | Type | Default | Notes | ||
|---|---|---|---|---|---|
kind | "watched" | "take" \ | "milestone"` | — | Drives the badge tint; milestone switches layout. |
author | { name, handle, seed?, you? } | — | Required for watched/take; omit for milestone. | ||
time | string | — | Preformatted relative time. | ||
body | ReactNode | — | Take/note text, or system copy for milestone. | ||
token | { symbol, iconSrc?, price, change24h } | — | Optional tagged token → renders a TokenChip. | ||
reactions / onReact | Reaction[] / (emoji) => void | — | Optional; both required to show the ReactionBar. | ||
direction | "up" | "down"` | "up" | Milestone only — glyph + left-border color. | |
className | string | — | Merged via cn. |
None of its own. Motion lives in the embedded ReactionBar (spring-pop). Card-level press scale(0.98) is intentionally not applied here — the card holds interactive children; wrap in a link at the call site if the whole card should navigate.
<article>; handle is real text, badge is text (not color-only).body accepts ReactNode; callers must escape/verify any user content (React escapes strings by default).Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.