Bluesky Profile Widget

Unofficial Bluesky Profile Cards for Bluesky Friends 🦋

Card Generator UI: https://bsky-widget.saurabhdaware.in/

Usage

<!-- Paste in your CSS to avoid layout shift -->
<style>
  bsky-widget {
    min-height: 387px;
    width: 350px;
  }
</style>

<!-- Paste wherever you want to render the card -->
<bsky-widget data-handle="patak.dev"></bsky-widget>

<!-- Paste before end of body -->
<script
  src="https://unpkg.com/bsky-widget@~0.0/dist/index.js"
  type="module"
></script>

Usage as NPM module

Install

npm install bsky-widget@latest --save

Import and Use

import "bsky-widget";

<bsky-widget data-handle="saurabhd.bsky.social"></bsky-widget>;

Props

| Prop | Description | Example value | | :-------------------- | :------------------------------------------------------------- | :-------------------------- | | data-handle | handle of your bluesky account | "saurabhd.bsky.social" | | data-show-description | hide / show your description / bio from profile | "true" (default) or "false" | | data-show-banner | hide / show your banner (only applicable if you have a banner) | "true" (default) or "false" |

Like my work? You can star this repo or you can sponsor me from GitHub Sponsors @saurabhdaware ⭐️