Honeycomb
npmGitHub

HivePostCard

Display Hive posts with title, author, content preview, stats, and metadata.

Display-only component

Fetches post data automatically via condenser_api. Displays post content, author, stats, and metadata. Requires HiveProvider wrapper.

Usage

<script lang="ts">
  import { HivePostCard } from "@hiveio/honeycomb-svelte";
</script>

<HivePostCard
  author="barddev"
  permlink="my-first-post"
/>

Preview

Card (default)

@barddev

@barddev

2h ago

Building Components for Hive

Learn how to create reusable React components that interact with the Hive blockchain...

42 12
$8.45

Compact

Quick Update on Development Progress

@barddev · 5h ago

56 8$3.21

Grid

Honeycomb Components Tutorial

@barddev · 1d ago

89 24
$15.30

Props

PropTypeDefault
authorstringrequired
permlinkstringrequired
variant"card" | "compact" | "grid""card"
hide("author" | "thumbnail" | "payout" | "votes" | "comments" | "time")[][]
linkTargetstring"https://blog.openhive.network"
classstring-

Examples

Variants

<!-- Card (default) -->
<HivePostCard author="barddev" permlink="post" variant="card" />

<!-- Compact -->
<HivePostCard author="barddev" permlink="post" variant="compact" />

<!-- Grid -->
<HivePostCard author="barddev" permlink="post" variant="grid" />

Hide elements

<!-- Hide specific elements -->
<HivePostCard
  author="barddev"
  permlink="my-post"
  hide={["author", "thumbnail", "payout"]}
/>

<!-- Available options: "author" | "thumbnail" | "payout" | "votes" | "comments" | "time" -->

Custom styling

<!-- Custom styling with class -->
<HivePostCard
  author="barddev"
  permlink="my-post"
  class="max-w-xl shadow-lg rounded-2xl"
/>

Render post list

<script lang="ts">
  import { HivePostCard } from "@hiveio/honeycomb-svelte";

  let { posts }: {
    posts: Array<{ author: string; permlink: string }>;
  } = $props();
</script>

<div class="space-y-4">
  {#each posts as post (`${post.author}/${post.permlink}`)}
    <HivePostCard
      author={post.author}
      permlink={post.permlink}
    />
  {/each}
</div>
ManabarPost List