{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"social-posts","type":"registry:component","title":"Social posts","description":"Four feed posts — text, photo grid, poll and link preview — with optimistic toggles, rolling counts, a shared-layout photo viewer and results that count up.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"path":"registry/geturui/examples/social-posts/text-post.tsx","type":"registry:component","target":"components/examples/social-posts/text-post.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { BadgeCheck, BarChart2, Bookmark, Heart, MessageCircle, MoreHorizontal, Repeat2, type LucideIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TextPostProps {\n author?: string;\n handle?: string;\n verified?: boolean;\n /** Relative time label, e.g. \"2h\". */\n time?: string;\n /** Paragraphs of the post. */\n body?: string[];\n replies?: number;\n reposts?: number;\n likes?: number;\n views?: number;\n defaultLiked?: boolean;\n defaultReposted?: boolean;\n defaultBookmarked?: boolean;\n onReply?: () => void;\n onChange?: (state: { liked: boolean; reposted: boolean; bookmarked: boolean }) => void;\n className?: string;\n}\n\nconst compact = (n: number) => new Intl.NumberFormat(\"en-US\", { notation: \"compact\", maximumFractionDigits: 1 }).format(n);\nconst spring = { type: \"spring\", stiffness: 480, damping: 30 } as const;\nconst BURST = Array.from({ length: 6 }, (_, i) => ({ x: Math.cos((i / 6) * Math.PI * 2) * 16, y: Math.sin((i / 6) * Math.PI * 2) * 16 }));\n\nfunction Rolling({ value, up, reduce }: { value: number; up: boolean; reduce: boolean }) {\n return (\n \n \n \n {compact(value)}\n \n \n \n );\n}\n\nfunction Pop({ on, Icon, fill, reduce }: { on: boolean; Icon: LucideIcon; fill?: boolean; reduce: boolean }) {\n return (\n \n \n \n );\n}\n\n/** Text post with optimistic like, repost and bookmark toggles: icons pop, the like bursts and every count rolls to its new value. */\nexport function TextPost({\n author = \"Maya Kerrigan\",\n handle = \"@mayamakes\",\n verified = true,\n time = \"2h\",\n body = [\n \"Hot take after a year of shipping motion in production: most interfaces don't need more animation, they need shorter animation.\",\n \"We cut our default duration from 400ms to 180ms and support tickets about the app feeling slow dropped by a third.\",\n ],\n replies = 48,\n reposts = 212,\n likes = 1840,\n views = 48200,\n defaultLiked = false,\n defaultReposted = false,\n defaultBookmarked = false,\n onReply,\n onChange,\n className,\n}: TextPostProps) {\n const reduce = useReducedMotion() ?? false;\n const [state, setState] = React.useState({ liked: defaultLiked, reposted: defaultReposted, bookmarked: defaultBookmarked });\n const [burst, setBurst] = React.useState(0);\n const id = React.useId();\n\n function flip(key: keyof typeof state) {\n const next = { ...state, [key]: !state[key] };\n setState(next);\n onChange?.(next);\n if (key === \"liked\" && next.liked && !reduce) setBurst((b) => b + 1);\n }\n\n const likeCount = likes + (state.liked ? 1 : 0) - (defaultLiked ? 1 : 0);\n const repostCount = reposts + (state.reposted ? 1 : 0) - (defaultReposted ? 1 : 0);\n const action = \"group/a inline-flex h-8 items-center gap-1.5 rounded-full px-2 text-[12.5px] outline-none transition-colors focus-visible:shadow-[var(--focus-ring)]\";\n\n return (\n
\n
\n \n {author.split(\" \").map((p) => p[0]).join(\"\").slice(0, 2)}\n \n
\n

\n {author}\n {verified && }\n

\n

\n {handle} · {time}\n

\n
\n \n
\n\n
\n {body.map((p, i) => (\n

{p}

\n ))}\n
\n\n
\n \n \n \n \n \n Views\n {compact(views)}\n \n \n
\n
\n );\n}\n"},{"path":"registry/geturui/examples/social-posts/image-grid.tsx","type":"registry:component","target":"components/examples/social-posts/image-grid.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ChevronLeft, ChevronRight, Heart, MessageCircle, X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SceneKind = \"dunes\" | \"harbour\" | \"ridge\" | \"market\";\n\nexport interface PostImage {\n scene: SceneKind;\n alt: string;\n}\n\nexport interface ImageGridPostProps {\n author?: string;\n place?: string;\n time?: string;\n caption?: string;\n images?: PostImage[];\n likes?: number;\n comments?: number;\n onLikeChange?: (liked: boolean) => void;\n className?: string;\n}\n\nconst DEFAULT_IMAGES: PostImage[] = [\n { scene: \"dunes\", alt: \"Sand dunes at first light under a pale sun\" },\n { scene: \"harbour\", alt: \"Fishing boats in a harbour wrapped in fog\" },\n { scene: \"ridge\", alt: \"Pine ridge in layers of blue haze\" },\n { scene: \"market\", alt: \"Night market lanterns strung over a street\" },\n];\n\nfunction Scene({ kind }: { kind: SceneKind }) {\n return (\n \n {kind === \"dunes\" && (\n <>\n \n \n \n \n \n )}\n {kind === \"harbour\" && (\n <>\n \n \n \n \n \n \n )}\n {kind === \"ridge\" && (\n <>\n \n \n \n \n \n )}\n {kind === \"market\" && (\n <>\n \n \n {[16, 40, 64, 88, 112, 136].map((x, i) => (\n \n ))}\n \n \n \n \n )}\n \n );\n}\n\n/** Photo post with a drawn image grid: a tile expands into a viewer with a shared-layout morph, arrow-key paging and Escape to close. */\nexport function ImageGridPost({\n author = \"Lena Ortiz\",\n place = \"Field notes, week 38\",\n time = \"5h\",\n caption = \"Four mornings, four places, one camera. The fog in the harbour lifted about ten minutes after this.\",\n images = DEFAULT_IMAGES,\n likes = 326,\n comments = 18,\n onLikeChange,\n className,\n}: ImageGridPostProps) {\n const reduce = useReducedMotion() ?? false;\n const [view, setView] = React.useState<{ origin: number; index: number } | null>(null);\n const open = view?.index ?? null;\n const [liked, setLiked] = React.useState(false);\n const tiles = React.useRef<(HTMLButtonElement | null)[]>([]);\n const closeBtn = React.useRef(null);\n const id = React.useId();\n const shown = images.slice(0, 4);\n\n const isOpen = view !== null;\n React.useEffect(() => {\n if (isOpen) closeBtn.current?.focus();\n }, [isOpen]);\n\n function close() {\n const i = view?.index;\n setView(null);\n if (i !== undefined) requestAnimationFrame(() => tiles.current[i]?.focus());\n }\n\n const page = (d: number) => setView((v) => (v ? { ...v, index: (v.index + d + shown.length) % shown.length } : v));\n const navBtn = \"grid size-9 place-items-center rounded-full bg-glass text-ink shadow-sm outline-none backdrop-blur focus-visible:shadow-[var(--focus-ring)]\";\n const layout = (i: number) => (reduce ? undefined : `${id}-img-${i}`);\n\n return (\n
\n
\n \n {author.split(\" \").map((p) => p[0]).join(\"\")}\n \n
\n

{author}

\n

\n {place} · {time}\n

\n
\n
\n

{caption}

\n\n {\n if (open === null) return;\n if (e.key === \"Escape\") close();\n if (e.key === \"ArrowRight\") page(1);\n if (e.key === \"ArrowLeft\") page(-1);\n }}\n >\n
1 && \"grid-cols-2\", shown.length > 2 && \"grid-rows-2\")}>\n {shown.map((img, i) => (\n {\n tiles.current[i] = el;\n }}\n type=\"button\"\n aria-label={`Open photo ${i + 1} of ${shown.length}: ${img.alt}`}\n onClick={() => setView({ origin: i, index: i })}\n className={cn(\"group relative overflow-hidden outline-none focus-visible:shadow-[inset_0_0_0_3px_var(--volt-ink)]\", shown.length === 3 && i === 0 && \"row-span-2\")}\n >\n {view?.origin !== i && (\n \n \n \n )}\n \n ))}\n
\n\n \n {view !== null && open !== null && (\n \n \n \n \n \n \n \n \n \n \n \n \n

\n {open + 1} of {shown.length} · {shown[open].alt}\n

\n \n \n )}\n \n \n\n
\n {\n setLiked(!liked);\n onLikeChange?.(!liked);\n }}\n whileTap={reduce ? undefined : { scale: 0.85 }}\n className={cn(\"inline-flex h-8 items-center gap-1.5 rounded-full px-2 text-[12.5px] outline-none transition-colors hover:bg-surface-hover focus-visible:shadow-[var(--focus-ring)]\", liked ? \"font-semibold text-volt-ink\" : \"text-ink-subtle\")}\n >\n \n {(likes + (liked ? 1 : 0)).toLocaleString(\"en-US\")}\n \n \n \n {comments}\n comments\n \n
\n
\n );\n}\n"},{"path":"registry/geturui/examples/social-posts/poll.tsx","type":"registry:component","target":"components/examples/social-posts/poll.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion, useSpring, useTransform } from \"motion/react\";\nimport { CheckCircle2, Clock } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PollOption {\n id: string;\n label: string;\n votes: number;\n}\n\nexport interface PollPostProps {\n author?: string;\n handle?: string;\n time?: string;\n question?: string;\n options?: PollOption[];\n /** Label for the time left, e.g. \"2 days left\". */\n remaining?: string;\n /** Option id the viewer already voted for. */\n defaultVote?: string | null;\n onVote?: (optionId: string | null) => void;\n className?: string;\n}\n\nconst DEFAULT_OPTIONS: PollOption[] = [\n { id: \"o1\", label: \"Spring, stiffness 400\", votes: 412 },\n { id: \"o2\", label: \"Ease out, 200ms\", votes: 268 },\n { id: \"o3\", label: \"Ease in-out, 300ms\", votes: 157 },\n { id: \"o4\", label: \"No motion by default\", votes: 89 },\n];\n\nfunction Percent({ value, reduce }: { value: number; reduce: boolean }) {\n const mv = useSpring(reduce ? value : 0, { stiffness: 120, damping: 22 });\n const text = useTransform(mv, (v) => `${Math.round(v)}%`);\n React.useEffect(() => {\n if (reduce) mv.jump(value);\n else mv.set(value);\n }, [mv, value, reduce]);\n return {text};\n}\n\n/** Poll post: pick an option and the results bars grow in with percentages counting up, your choice marked, with undo while the poll is open. */\nexport function PollPost({\n author = \"Jonah Reyes\",\n handle = \"@jonahbuilds\",\n time = \"1h\",\n question = \"Which motion default should ship in our design system v2?\",\n options = DEFAULT_OPTIONS,\n remaining = \"2 days left\",\n defaultVote = null,\n onVote,\n className,\n}: PollPostProps) {\n const reduce = useReducedMotion() ?? false;\n const [vote, setVote] = React.useState(defaultVote);\n const id = React.useId();\n\n const counts = options.map((o) => o.votes + (vote === o.id && defaultVote !== o.id ? 1 : 0) - (defaultVote === o.id && vote !== o.id ? 1 : 0));\n const total = counts.reduce((a, b) => a + b, 0);\n const pct = counts.map((c) => (total ? (c / total) * 100 : 0));\n const lead = Math.max(...counts);\n\n function choose(next: string | null) {\n setVote(next);\n onVote?.(next);\n }\n\n return (\n
\n
\n \n {author.split(\" \").map((p) => p[0]).join(\"\")}\n \n

\n {author}\n \n {handle} · {time}\n \n

\n
\n

\n {question}\n

\n\n \n {vote === null ? (\n \n {options.map((o) => (\n
  • \n choose(o.id)}\n whileTap={reduce ? undefined : { scale: 0.98 }}\n className=\"h-10 w-full rounded-full border border-border-strong px-4 text-left text-[13.5px] font-medium text-ink outline-none transition-colors hover:bg-surface-hover focus-visible:shadow-[var(--focus-ring)]\"\n >\n {o.label}\n \n
    • \n ))}\n     \n ) : (\n \n {options.map((o, i) => {\n const mine = vote === o.id;\n const top = counts[i] === lead;\n return (\n
  • \n \n \n \n {o.label}\n {mine && (\n <>\n \n Your vote\n \n )}\n \n \n \n \n
    • \n );\n })}\n     \n )}\n     \n\n
    \n {total.toLocaleString(\"en-US\")} votes\n ·\n \n \n {remaining}\n \n {vote !== null && (\n \n )}\n
    \n

    \n {vote ? `Voted for ${options.find((o) => o.id === vote)?.label}. ${options.map((o, i) => `${o.label} ${Math.round(pct[i])}%`).join(\", \")}` : \"\"}\n

    \n
    \n );\n}\n"},{"path":"registry/geturui/examples/social-posts/link-preview.tsx","type":"registry:component","target":"components/examples/social-posts/link-preview.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { ArrowUpRight, Check, Globe, Heart, Link2, MessageCircle } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface LinkPreview {\n url: string;\n domain: string;\n title: string;\n description: string;\n /** Short label drawn on the preview image. */\n kicker?: string;\n}\n\nexport interface LinkPreviewPostProps {\n author?: string;\n role?: string;\n time?: string;\n /** Always-visible opening of the post. */\n text?: string;\n /** Revealed by \"Show more\". */\n more?: string;\n link?: LinkPreview;\n likes?: number;\n comments?: number;\n onLikeChange?: (liked: boolean) => void;\n className?: string;\n}\n\nconst DEFAULT_LINK: LinkPreview = {\n url: \"https://geturui.com/journal/motion-budget\",\n domain: \"geturui.com\",\n title: \"A motion budget for product teams\",\n description: \"How to decide what moves, for how long, and what stays still. With a one-page worksheet.\",\n kicker: \"Journal\",\n};\n\n/** Post with an expandable body and a rich link preview whose drawn image drifts on hover, plus like and copy-link actions. */\nexport function LinkPreviewPost({\n author = \"Priya Nair\",\n role = \"Head of design, Kestrel\",\n time = \"3h\",\n text = \"We gave every squad a motion budget this quarter: three signature moments per flow, everything else under 200ms.\",\n more = \"The result was calmer screens and faster reviews. Nobody argued about easing curves anymore because the budget made the trade-offs visible. Write-up below, worksheet included.\",\n link = DEFAULT_LINK,\n likes = 94,\n comments = 12,\n onLikeChange,\n className,\n}: LinkPreviewPostProps) {\n const reduce = useReducedMotion() ?? false;\n const [expanded, setExpanded] = React.useState(false);\n const [liked, setLiked] = React.useState(false);\n const [copied, setCopied] = React.useState(false);\n const timer = React.useRef | null>(null);\n const moreId = React.useId();\n\n React.useEffect(() => () => {\n if (timer.current) clearTimeout(timer.current);\n }, []);\n\n async function copy() {\n try {\n await navigator.clipboard?.writeText(link.url);\n } catch {\n // Clipboard may be blocked; still confirm so the action feels finished.\n }\n setCopied(true);\n if (timer.current) clearTimeout(timer.current);\n timer.current = setTimeout(() => setCopied(false), 1800);\n }\n\n const action = \"inline-flex h-8 items-center gap-1.5 rounded-full px-2 text-[12.5px] outline-none transition-colors hover:bg-surface-hover focus-visible:shadow-[var(--focus-ring)]\";\n\n return (\n
    \n
    \n \n {author.split(\" \").map((p) => p[0]).join(\"\")}\n \n
    \n

    {author}

    \n

    \n {role} · {time}\n

    \n
    \n
    \n\n
    \n

    \n {text}\n {!expanded && more && (\n <>\n {\" \"}\n \n \n )}\n

    \n \n {expanded && (\n \n {more}\n \n )}\n \n
    \n\n \n
    \n
    \n \n \n \n
    \n {link.kicker}\n {link.title}\n
    \n
    \n
    \n

    \n \n {link.domain}\n

    \n

    {link.title}

    \n

    {link.description}

    \n
    \n \n
    \n \n\n
    \n {\n setLiked(!liked);\n onLikeChange?.(!liked);\n }}\n whileTap={reduce ? undefined : { scale: 0.85 }}\n className={cn(action, liked ? \"font-semibold text-volt-ink\" : \"text-ink-subtle\")}\n >\n \n {likes + (liked ? 1 : 0)}\n \n \n \n {comments}\n comments\n \n \n \n \n {copied ? : }\n {copied ? \"Link copied\" : \"Copy link\"}\n \n \n \n
    \n
    \n );\n}\n"},{"path":"LICENSE-geturui.md","type":"registry:file","target":"LICENSE-geturui.md","content":"MIT License\n\nCopyright (c) 2026 geturui.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}],"categories":["examples","social","post","feed","like","repost","poll","image grid","link preview","timeline"],"meta":{"tier":"free","license":"MIT","docs":"https://geturui.com/docs/social-posts"}}