Component library

Showing 14 components on linkedin.

<PostFrame>

linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts

Platform chrome wrapper with aspect ratio from dimension.

When to use: Root wrapper for every post preview. Set platform and dimension to match the target feed.

Preview

LinkedInlandscape

Product release

Workflow versioning is live

Pin production definitions. Promote through dev → staging → prod.

Prop	Type	Notes
platform	"linkedin" \| "instagram"	Required. Target social platform.Values: linkedin, instagram
dimension	"square" \| "portrait" \| "landscape" \| "carousel"	Required. Layout aspect ratio.Values: square, portrait, landscape, carousel
children	ReactNode	Required. Post body.

Examples

<PostFrame platform="linkedin" dimension="landscape">
  <PostEyebrow>Product release</PostEyebrow>
  <PostHeadline>Workflow versioning is live</PostHeadline>
  <PostBody>Pin production definitions. Promote through dev → staging → prod.</PostBody>
</PostFrame>

<PostEyebrow>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Small uppercase label above the headline (intent or category).
When to use: Surface what the post is for inside the preview card.
Preview
Product release
Prop Type Notes
children ReactNode Required. Eyebrow label text.
Examples
```
<PostEyebrow>Product release</PostEyebrow>
```
<PostHeadline>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Primary post headline.
When to use: Hook line visible in the feed preview.
Preview
Your first AI agent, live in 2 weeks
Prop Type Notes
children ReactNode Required. Headline text.
Examples
```
<PostHeadline>Your first AI agent, live in 2 weeks</PostHeadline>
```
<PostBody>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts
Post copy body.
When to use: Main prose after the headline.
Preview
Flat licence. Unlimited usage. Self-hosted from day one.
Prop Type Notes
children ReactNode Required. Body copy.
Examples
```
<PostBody>Flat licence. Unlimited usage. Self-hosted from day one.</PostBody>
```
<PostCta>
linkedinlandscapecarouselblogcase-studyeventreleaseproduct-updatePosts
Text link CTA with arrow.
When to use: Blog promos, changelog links, event registration.
Preview
Read the changelog →
Prop Type Notes
label string Required. Link label.Example: Read the article
href string Required. Destination URL.Example: https://lunnoa.com/blog/example
Examples
```
<PostCta label="Read the changelog" href="https://lunnoa.com/changelog" />
```
<PostMedia>
linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventmilestonePosts
Image block with optional caption; shows placeholder when src omitted.
When to use: Hero image or carousel slide visual.
Preview
Prop Type Notes
src string Optional. Image URL.
alt string Optional. Alt text.
caption string Optional. Caption under the image.
Examples
```
<PostMedia src="/assets/example.png" alt="Product screenshot" />
```

Prop	Type	Notes
children	ReactNode	Required. Eyebrow label text.

Prop	Type	Notes
children	ReactNode	Required. Headline text.

Prop	Type	Notes
children	ReactNode	Required. Body copy.

Prop	Type	Notes
label	string	Required. Link label.Example: `Read the article`
href	string	Required. Destination URL.Example: `https://lunnoa.com/blog/example`

Prop	Type	Notes
src	string	Optional. Image URL.
alt	string	Optional. Alt text.
caption	string	Optional. Caption under the image.

<LinkedInTextPost>

linkedinlandscapereleaseproduct-updateblogthought-leadershipmilestonePosts

Convenience layout: LinkedIn landscape text post with optional media and CTA.

When to use: Release notes, product updates, thought leadership on LinkedIn.

Preview

LinkedInlandscape

Product update

Environment promotion is live

Move workflow definitions from dev to staging to production with audit trail.

Read the docs →

Prop	Type	Notes
headline	string	Required. Post headline.
body	ReactNode	Required. Post body copy.
eyebrow	string	Optional. Optional category label.
ctaLabel	string	Optional. CTA link label.
ctaHref	string	Optional. CTA destination URL.
mediaSrc	string	Optional. Optional hero image URL.
mediaAlt	string	Optional. Hero image alt text.

Examples

<LinkedInTextPost
  eyebrow="Product update"
  headline="Environment promotion is live"
  body="Move workflow definitions from dev to staging to production with audit trail."
  ctaLabel="Read the docs"
  ctaHref="https://lunnoa.com/docs"
/>

<PostCanvas>

linkedinsquareportraitlandscapecarouselreleaseproduct-updateblogcase-studyeventthought-leadershiphiringmilestonePosts

Fixed-pixel artboard at platform export dimensions (1080×1080, 1080×1350, 1200×627).

When to use: Build custom finished graphics when no intent template fits. Prefer ReleasePost, BlogPromoPost, etc. for standard jobs.

Preview

Custom

Headline on a finished artboard

Prop	Type	Notes
dimension	"square" \| "portrait" \| "landscape" \| "carousel"	Required. Export aspect ratio.Values: square, portrait, landscape, carousel
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Canvas background token.
children	ReactNode	Required. Post body.

Examples

<PostCanvas dimension="landscape" background="vivid">
  <PostEyebrow>Custom</PostEyebrow>
  <PostHeadline>Headline on a finished artboard</PostHeadline>
</PostCanvas>

<ReleasePost>

linkedinlandscapereleasePosts

Finished release announcement graphic (1200×627).

When to use: Product releases and version launches on LinkedIn.

Preview

Product release

v2.4

Workflow versioning is live

Pin production definitions. Promote through dev, staging, and production.

Read the changelog →

Prop	Type	Notes
headline	string	Required. Release headline.
body	ReactNode	Required. Release summary.
version	string	Optional. Version badge, e.g. 2.4.
eyebrow	string	Optional. Default: `Product release`. Category label.
ctaLabel	string	Optional. Optional CTA line (no link).
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `vivid`. Canvas background token.

Examples

<ReleasePost
  version="2.4"
  headline="Workflow versioning is live"
  body={<>Pin production definitions. Promote through dev, staging, and production.</>}
  ctaLabel="Read the changelog"
/>

<ProductUpdatePost>

linkedinlandscapeproduct-updatePosts

Finished product update graphic (1200×627) with feature highlight panel.

When to use: Feature launches and capability announcements.

Preview

Product update

Promote workflows across environments

Git-backed promotion paths mean IT governs what ships.

Now live

Dev → staging → prod

Prop	Type	Notes
headline	string	Required. Update headline.
body	ReactNode	Required. Update summary.
feature	string	Optional. Short feature callout in side panel.
eyebrow	string	Optional. Default: `Product update`. Category label.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `brand`. Canvas background token.

Examples

<ProductUpdatePost
  headline="Promote workflows across environments"
  body={<>Git-backed promotion paths mean IT governs what ships.</>}
  feature="Dev → staging → prod"
/>

<HiringPost>

linkedinportraithiringPosts

Finished hiring graphic (1080×1350 portrait).

When to use: Open role announcements.

Preview

We're hiring

Engineering

Senior platform engineer

Build the self-hosted agent runtime our enterprise customers run on their own infrastructure.

Apply now

Prop	Type	Notes
role	string	Required. Job title.
team	string	Optional. Team or department.
body	ReactNode	Required. Role summary.
applyLabel	string	Optional. Default: `Apply now`. CTA button label.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `vivid`. Canvas background token.

Examples

<HiringPost
  role="Senior platform engineer"
  team="Engineering"
  body={<>Build the self-hosted agent runtime our enterprise customers run on their own infrastructure.</>}
/>

<MilestonePost>

linkedinsquaremilestonereleasePosts

Finished milestone metric graphic (1080×1080).

When to use: Customer counts, uptime, or launch milestones.

Preview

Workflows in production

Across finance, operations, and HR teams.

Prop	Type	Notes
value	string	Required. Headline metric.Example: `100`
label	string	Required. Metric label.Example: `Enterprise deployments`
body	ReactNode	Optional. Supporting line.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `brand`. Canvas background token.

Examples

<MilestonePost value="50" label="Workflows in production" body={<>Across finance, operations, and HR teams.</>} />

<ThoughtLeadershipPost>

linkedinlandscapethought-leadershipPosts

Finished thought-leadership graphic (1200×627).

When to use: Opinion pieces and executive takes on LinkedIn.

Preview

Business users build. IT governs.

The split that keeps AI automation out of shadow IT.

Lunnoa team

Prop	Type	Notes
headline	string	Required. Core thesis.
body	ReactNode	Required. Supporting argument.
author	string	Optional. Attribution line.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `dark`. Canvas background token.

Examples

<ThoughtLeadershipPost
  headline="Business users build. IT governs."
  body={<>The split that keeps AI automation out of shadow IT.</>}
  author="Lunnoa team"
/>

<EventPost>

linkedinportraiteventPosts

Finished event promo graphic (1080×1350 portrait).

When to use: Webinars, conferences, and launch events.

Preview

Event

15 July 2026 · 14:00 BST

Self-hosted AI agents workshop

Virtual

Live build session: your first agent in two weeks.

Prop	Type	Notes
title	string	Required. Event name.
when	string	Required. Date or time window.
body	ReactNode	Required. Event description.
location	string	Optional. Venue or virtual.
background	"light" \| "white" \| "dark" \| "brand" \| "vivid"	Optional. Default: `brand`. Canvas background token.

Examples

<EventPost
  title="Self-hosted AI agents workshop"
  when="15 July 2026 · 14:00 BST"
  location="Virtual"
  body={<>Live build session: your first agent in two weeks.</>}
/>

Preview

Workflow versioning is live

Examples

Preview

Examples

Preview

Your first AI agent, live in 2 weeks

Examples

Preview

Examples

Preview

Examples

Preview

Examples

Preview

Environment promotion is live

Examples

Preview

Headline on a finished artboard

Examples

Preview

Workflow versioning is live

Examples

Preview

Promote workflows across environments

Examples

Preview

Senior platform engineer

Examples

Preview

Workflows in production

Examples

Preview

Business users build. IT governs.

Examples

Preview

Self-hosted AI agents workshop

Examples