SocialComposer

Code

import { SocialComposer } from "@fadymondy/nasaq/web";export function Publish() {  return (    <SocialComposer      accounts={[        { id: "x1", platform: "x", name: "@nasaq" },        { id: "li1", platform: "linkedin", name: "Nasaq Studio" },      ]}      onSubmit={(post, checks) => console.log(post, checks)}    />  );}

Marketing · beta

Live examples and controls: SocialComposer in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/social-composer.json

Write once, post to many. Pick the accounts, write the text, and every chosen platform shows its own counter against its own limit, a preview of what it will send, and what is still missing (Instagram needs an image, TikTok a video). Any platform can take a version of its own. Nothing is cut for you: the composer says what is wrong and the author fixes it.

SocialMetricsTable is the other half: totals plus a sortable per-post table of impressions, engagements and rate.

The limits come from the write plugins of fadymondy.com-v2: X 280 (a link weighs 23), Bluesky 300, Threads 500, LinkedIn 3,000, Facebook 63,206, Instagram 2,200 (image required, 30 hashtags at most), TikTok 2,200 (video required).

When to useCopy Anchor Link

• A publishing screen for a brand or studio that posts to several networks.
• Showing how posts performed next to the composer.

When not to useCopy Anchor Link

• A single long-form editor: use the rich text editor.
• Actually sending posts: this component collects and checks the post; your backend talks to each network.

ImportCopy Anchor Link

import { SocialComposer, SocialMetricsTable, checkSocialPost } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { SocialComposer } from "@fadymondy/nasaq/web";

export function Publish() {
  return (
    <SocialComposer
      accounts={[
        { id: "x1", platform: "x", name: "@nasaq" },
        { id: "li1", platform: "linkedin", name: "Nasaq Studio" },
      ]}
      onSubmit={(post, checks) => console.log(post, checks)}
    />
  );
}

AnatomyCopy Anchor Link

SocialComposer            data-slot="social-composer"
├─ accounts               toggle buttons (aria-pressed), one per connected account
├─ text                   Field + Textarea
├─ media + Improve        attach buttons, chips, AiSplitButton
├─ schedule               DatePicker + TimePicker
├─ actions                Publish now / Schedule post, Save draft
└─ targets                one Card per chosen platform  data-slot="social-target" data-level="ok|near|over"
   ├─ counter             Progress + "n of limit"
   ├─ preview or own text
   └─ problems            empty, over, media, hashtags

APICopy Anchor Link

SocialComposerCopy Anchor Link

SocialMetricsTableCopy Anchor Link

Logic (exported)Copy Anchor Link

ExamplesCopy Anchor Link

Improve with AICopy Anchor Link

import { SocialComposer, type SocialPost } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Assisted({ accounts, shorten }: { accounts: React.ComponentProps<typeof SocialComposer>["accounts"]; shorten: (t: string) => Promise<string> }) {
  const [post, setPost] = useState<SocialPost>({ body: "", variants: {}, accountIds: [], media: [], scheduledAt: null });
  return (
    <SocialComposer
      accounts={accounts}
      value={post}
      onValueChange={setPost}
      assistActions={[{ id: "shorten", label: "Shorten" }, { id: "hashtags", label: "Add hashtags" }]}
      onAssist={async (id, p) => id === "shorten" && setPost({ ...p, body: await shorten(p.body) })}
    />
  );
}

Metrics with a row menuCopy Anchor Link

import { SocialMetricsTable } from "@fadymondy/nasaq/web";

export const Results = ({ rows }: { rows: React.ComponentProps<typeof SocialMetricsTable>["rows"] }) => (
  <SocialMetricsTable rows={rows} rowActions={(r) => [{ id: "open", label: "Open post", onSelect: () => window.open(`/posts/${r.id}`) }]} />
);

AccessibilityCopy Anchor Link

• Accounts are buttons with aria-pressed, in a fieldset with a legend.
• Each counter is a Progress named "X character count"; the numbers are also written out beside it, and colour is never the only signal (the text says how many are over).
• Problems are plain text under the target.
• The table is the DataTable: arrow keys move between rows, Shift+F10 opens the row menu.

RTL & i18nCopy Anchor Link

• Arabic and English strings ship in; pass labels to override.
• Platform names stay in Latin script, as brands write them, and are shown as text, not logos. Handles sit in a bdi.
• Counts use Western digits unless your provider says otherwise. Arabic hashtags count.

Styling & tokensCopy Anchor Link

Cards, progress tones (default, warning, danger) and stat cards use the standard tokens. The layout is one column on narrow screens and two from lg.

Do / Don'tCopy Anchor Link

• Do save variants as the text to send per platform; checks[i].text is exactly what goes out.
• Do run the same checkSocialPost on the server before publishing.
• Don't trim text to fit a limit silently.
• Don't show a platform's logo unless you have its official artwork.

RelatedCopy Anchor Link

• AI states · DatePicker · DataTable · Progress

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-marketing-social-composer--docs