Props

Name	Description	Type	Default value	Required/Optional
author	Information about the author user of the post			Required
- name	Display name of the author	string		Required
- username	Bluesky handle of the author	string		Required
- image	URL to the profile picture of the author	string		Required
text	The text of the post itself	string		Required
time	Time of posting. If passed in as a Date object, it will be formatted as it is on Bluesky	Date \| string		Required
permalink	The URL for the post (or anything, it's up to you). Clicking the Bluesky logo or the time of posting on the card will take you to this URL.	string		Optional
images	Images in the post	Array<{ src, alt? }>		Optional
- src	Source URL for the image	string		Required
- alt	Alt description for the image	string		Optional
engagement	The number of engagements (replies, reposts, likes) the post has received	{ replies?, reposts?, likes? }		Optional
- replies	Number of replies	number	0	Optional
- reposts	Number of reposts	number	0	Optional
- likes	Number of likes	number	0	Optional
clickableProfileLink	Creates a clickable visual effect on the name and profile picture of the author. If turned on, clicking these elements will open the user's profile on Bluesky.	boolean	false	Optional
showTime	Controls wheter the time of the post should be displayed	boolean	true	Optional
showEngagement	Controls wheter the engagements of the post should be displayed	boolean	true	Optional
theme	The theme setting for the card	"light" \| "dim" \| "dark"	"light"	Optional
colors	Gives you the option to override the colors used in the card	{ primary, secondary, accent, muted, background, border }	{}	Optional
gradientBackground	Sets the card's background to gradient	boolean	false	Optional
blurredBackground	Sets the card's background to blurred	boolean	false	Optional

Try them out on this playground:

Live Editor

<BlueskyCard
  className="with-background-image"
  author={{
    name: 'shing yin khor',
    username: 'shing.bsky.social',
    image: 'img/shing.jpg',
  }}
  text="the only constant we have are our communities and networks of care and mutual aid, and that will always be worth investing your time, money and emotional bandwidth into."
  time={new Date('2024-11-06T20:20:00Z')} // try a string instead!
  permalink="https://bsky.app/profile/shing.bsky.social/post/3lackzgbvrq2j"
  engagement={{
    likes: 175,
    reposts: 40,
    replies: 0,
  }}
  theme="light"
  colors={{}}
  gradientBackground={false}
  blurredBackground={false}
  clickableProfileLink={false}
  showEngagement={true}
  showTime={true}
/>

Result