Composer Input

Text 152

About

Composer Input A versatile and responsive composer component for rich text input, file attachments, and actions. Styled with shadcn/ui principles, it's ideal for chat applications, comment sections, and content creation forms.

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

Code

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

Usage.tsx

// demo.tsx

import React from "react"
import { toast } from "sonner"
import { ComposerInput, Attachment } from "@/components/ui/composer-input" // Adjust path as needed

// Sample attachments for the demo
const sampleAttachments: Attachment[] = [
  {
    id: '1',
    fileName: 'Project-Brief.pdf',
    fileType: 'document',
  },
  {
    id: '2',
    fileName: 'UI-Mockup.png',
    fileType: 'image',
    thumbnailUrl: 'https://cdn.21st.dev/assets/mirror/8c/8c828351960b242e746bc1bdd6da415940395a92d27b8e00f34797b1dd8ab969.jpg',
  },
  {
    id: '3',
    fileName: 'Design-Assets.zip',
    fileType: 'document',
  }
];

export default function ComposerInputDemo() {
  const handleSend = (message: string, attachments: Attachment[]) => {
    // In a real app, this function would send the data to an API
    console.log("Sending message:", message)
    console.log("With attachments:", attachments)

    // Use sonner to show a success toast
    toast.success("Message Sent!", {
      description: `Your message and ${attachments.length} attachments have been sent.`,
      duration: 3000,
    })
  }

  return (
    <div className="w-full max-w-2xl mx-auto p-4 flex flex-col items-center justify-center min-h-[400px]">
      <h2 className="text-2xl font-bold mb-4">Leave a Comment</h2>
      <ComposerInput
        onSend={handleSend}
        initialAttachments={sampleAttachments}
        placeholder="Share your thoughts or attach a file..."
        aria-label="Comment composer"
      />
    </div>
  )
}