https://github.com/sujjeee/tweet-card

Minimal Tweet Card built with Tailwind CSS
https://github.com/sujjeee/tweet-card

nextjs tailwindcss typescript

Last synced: 6 days ago
JSON representation

Minimal Tweet Card built with Tailwind CSS

• Host: GitHub
• URL: https://github.com/sujjeee/tweet-card
• Owner: sujjeee
• Created: 2024-07-16T11:05:29.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T19:52:43.000Z (about 2 months ago)
• Last Synced: 2024-10-25T03:50:02.247Z (14 days ago)
• Topics: nextjs, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://tweetcard.vercel.app
• Size: 649 KB
• Stars: 27
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Tweet Card component built with [React Tweet](https://react-tweet.vercel.app/) and [TailwindCSS](https://tailwindcss.com/).



  



## Props

Tweet card component accepts the following props:

- `tweetId` of the tweet, which can be obtained from the tweet url.

- `metrics` boolean to show tweet metrics. (Default is true).

- `media` boolean to show tweet media. (Default is true).

- `timestamp` boolean to show tweet timestamp. (Default is true).

- `scale` controls the scale of the tweet content within the card. (Default is 0.7).

## Usage

1. Install the `react-tweet` npm package.

2. Visit [this URL](https://github.com/sujjeee/tweet-card/blob/main/src/components/tweet-card.tsx) and copy the code.

   - If you are using `shadcn`, you are good to go. Otherwise, you need to add `tailwind-merge`. Check the code [here](https://github.com/sujjeee/tweet-card/blob/main/src/lib/utils.ts).

3. Paste the `` component into your project:

   ```jsx

   import React from "react"

   import { TweetCard } from "./path-to-your-tweet-card-component"

   export const App = () => {

     const tweetId = "1234567890"

     return 

   }

   ```