Twitter Tweet Composer

Forms

About

A feature-rich, animated tweet composer with character limits, thread creation, auto-resizing textareas, and modern UI interactions

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Twitter Tweet Composer to your project and fits it to your theme.

Code

How Twitter Tweet Composer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import React, { useState } from 'react'
import { TweetComposer, Tweet } from '@/components/ui/twitter-tweet-composer'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'

export default function Demo() {
  const [submittedTweets, setSubmittedTweets] = useState<Tweet[][]>([])

  const handleTweet = (tweets: Tweet[]) => {
    setSubmittedTweets(prev => [...prev, tweets])
    console.log('Tweets submitted:', tweets)
  }

  const handleCancel = () => {
    console.log('Tweet cancelled')
  }

  return (
    <div className="min-h-screen bg-background p-8 w-full space-y-4">
      <div className="flex justify-center">
        <TweetComposer
          placeholder="What's happening?"
          maxCharacters={280}
          userAvatar="https://cdn.21st.dev/assets/mirror/ef/ef58cf6ae8ddc095e4df5bbf2dc958d1712c36a184c8f4fd4a37f7d279010e69.jpg"
          userName="John Doe"
          userHandle="@johndoe"
          onTweet={handleTweet}
          onCancel={handleCancel}
          className="shadow-lg"
        />
      </div>

      {/* Submitted Tweets Display */}
      {submittedTweets.length > 0 && (
        <Card className="p-6">
          <h2 className="text-xl font-semibold mb-4">Submitted Tweets</h2>
          <div className="space-y-4">
            {submittedTweets.map((tweetGroup, groupIndex) => (
              <div key={groupIndex} className="border-l-2 border-primary/20 pl-4">
                <div className="flex items-center gap-2 mb-2">
                  <Badge variant="outline">
                    {tweetGroup.length === 1 ? 'Single Tweet' : `Thread (${tweetGroup.length} tweets)`}
                  </Badge>
                  <span className="text-xs text-muted-foreground">
                    Submitted {new Date().toLocaleTimeString()}
                  </span>
                </div>
                {tweetGroup.map((tweet, index) => (
                  <div key={tweet.id} className="mb-2">
                    {index > 0 && <Separator className="my-2" />}
                    <p className="text-sm bg-muted/30 p-3 rounded-lg">
                      {tweet.content}
                    </p>
                    <div className="text-xs text-muted-foreground mt-1">
                      {tweet.characterCount} characters
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  )
}