Components
Loading preview...
The ChatInput component (chat-input.tsx) is used as an text-area with predefined styling to fit well with the other components.
@jakobhoeg
npx shadcn@latest add https://21st.dev/r/jakobhoeg/chat-input"use client"
import { useState } from "react"
import { ChatInput } from "@/components/ui/chat-input"
import { Button } from "@/components/ui/button"
import { Paperclip, Mic, CornerDownLeft } from "lucide-react"
export function ChatInputDemo() {
const [value, setValue] = useState("")
return (
<div className="max-w-3xl min-w-[400px] p-4">
<form
className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring p-1"
onSubmit={(e) => {
e.preventDefault()
console.log("Submitted:", value)
}}
>
<ChatInput
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type your message here..."
className="min-h-12 resize-none rounded-lg bg-background border-0 p-3 shadow-none focus-visible:ring-0"
/>
<div className="flex items-center p-3 pt-0">
<Button variant="ghost" size="icon" type="button">
<Paperclip className="size-4" />
<span className="sr-only">Attach file</span>
</Button>
<Button variant="ghost" size="icon" type="button">
<Mic className="size-4" />
<span className="sr-only">Use Microphone</span>
</Button>
<Button
type="submit"
size="sm"
className="ml-auto gap-1.5"
>
Send Message
<CornerDownLeft className="size-3.5" />
</Button>
</div>
</form>
</div>
)
}