Tweet Card
betaA social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add tweet-cardnpm packages installed: class-variance-authority.
import { TweetCard } from "@/components/ui/tweet-card";Default
Gallery
<TweetCard>
| Prop | Type | Default |
|---|---|---|
author (required) | TweetCardAuthor | — |
text (required)A string is linked: URLs, | ReactNode | — |
avatarShape | "circle" | "rounded" | "rounded-md" | "rounded-lg" | "rounded" |
hrefThe post's URL. Adds the "view post" link. | string | — |
linkLabelName of the link to the post. | string | "View post on X" |
localeBCP 47 locale for the date and counts. | string | — |
mediaUp to four photos, laid out as the source did. | TweetCardMedia[] | — |
metrics | TweetCardMetrics | — |
timestamp | Date | string | — |
userInfoPositionWhere the author sits. | "top" | "bottom" | "bottom" |
Plus every attribute of <article> except children.
<TweetCardSkeleton>
Plus every attribute of <div>.
An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and #hashtags in string text become real links. The link to the post is a real, named link revealed on hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative (the name beside it is the link); verification is announced as text, counts are read in full ("1200 likes", not "1.2K"), and the date is a <time> element. Photos need alt text.
8/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes