Props
| Name | Description | Type | Default value | Required/Optional |
|---|---|---|---|---|
| author | Information about the author user of the tweet | { name, username, image, isVerified?, isBusiness?, isGovernment? isProtected? } | Required | |
| - name | Name of the author | string | Required | |
| - username | Twitter handle of the author | string | Required | |
| - image | URL to the profile picture of the author | string | Required | |
| - isVerified | Indicates whether the author is verified | boolean | false | Optional |
| - isBusiness | Indicates whether the author is a business | boolean | false | Optional |
| - isGovernment | Indicates whether the author is a government representative | boolean | false | Optional |
| - isProtected | Indicates whether the author's account is protected/private | boolean | false | Optional |
| tweet | The text of the tweet itself | string | Required | |
| time | Time of tweeting. If passed in as a Date object, it will be formatted as it is on Twitter | Date | string | Required | |
| source | The source application for the tweet (e.g. "Twitter for iPhone") | string | Required | |
| permalink | The URL for the tweet (or anything, it's up to you). Clicking the twitter logo or the time of tweeting on the card will take you to this URL. | string | Optional | |
| tweetImages | Images in the tweet | Array<{ src, isVideoThumbnail? }> | Optional | |
| - src | Source URL for the image | string | Required | |
| - isVideoThumbnail | Indicates whether the image is a video thumbnail | boolean | false | Optional |
| engagement | The number of engagements (replies, RTs, likes) the tweet has received | { replies?, retweets?, likes? } | Optional | |
| - replies | Number of replies | number | 0 | Optional |
| - retweets | Number of retweets | 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 Twitter. | boolean | false | Optional |
| showDetails | Controls wheter the time and source of the tweet should be displayed | boolean | true | Optional |
| showEngagement | Controls wheter the engagements of the tweet 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, background } | {} | Optional |
| gradientBackground | Sets the card's background to gradient | boolean | false | Optional |
| blurredBackground | Sets the card's background to blurred | boolean | false | Optional |
| emojis | If true, engagement icons will be replaced with emoji characters | boolean | false | Optional |
| fitInsideContainer | Scales the contents of the card to perfectly fit inside its parent container. Only works if the element is capable of overflowing on the page. | boolean | false | Optional |
Try them out on this playground: