Components / Forms

Composer

AI chat input with auto-expand and actions.

Preview

1"use client"2
3import * as React from "react"4import { Composer } from "@/components/ui/composer"5
6export function ComposerDemo() {7  const [value, setValue] = React.useState("")8
9  return (10    <Composer11      value={value}12      onChange={setValue}13      onSubmit={() => setValue("")}14      placeholder="Type a message..."15      16      17      18    />19  )20}

compact

The compact style of this component.

1"use client"2
3import * as React from "react"4import { Composer } from "@/components/ui/composer"5
6export function ComposerDemo() {7  const [value, setValue] = React.useState("")8
9  return (10    <Composer11      value={value}12      onChange={setValue}13      onSubmit={() => setValue("")}14      placeholder="Type a message..."15      size="sm"16      17      18    />19  )20}

actions

The actions style of this component.

1"use client"2
3import * as React from "react"4import { Composer, ComposerAction, ComposerFooter } from "@/components/ui/composer"5
6export function ComposerDemo() {7  const [value, setValue] = React.useState("")8
9  return (10    <Composer11      value={value}12      onChange={setValue}13      onSubmit={() => setValue("")}14      placeholder="Type a message..."15      16      17      footer={<ComposerFooter><ComposerAction label="Attach" /><ComposerAction label="Search web" /></ComposerFooter>}18    />19  )20}

counter

The counter style of this component.

0 / 240

1"use client"2
3import * as React from "react"4import { Composer } from "@/components/ui/composer"5
6export function ComposerDemo() {7  const [value, setValue] = React.useState("")8
9  return (10    <Composer11      value={value}12      onChange={setValue}13      onSubmit={() => setValue("")}14      placeholder="Type a message..."15      16      showCharCount maxLength={240}17      18    />19  )20}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/composer

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.