Form

Chat Bar

Growing chat input with a fixed send action segment.

All components Registry setup

Preview

components/ui/chat-bar.tsx

Placeholder

Editable multiline

Max height with internal scroll

Install

pnpm dlx shadcn@latest add @rhythmic-ui/chat-bar

Chat Bar API

Use it as a textarea-backed chat input. It grows from the Figma 53px height to 104px, then scrolls internally.

<ChatBar
  placeholder="What would you like to do?"
  onSend={() => sendMessage()}
/>

<ChatBar
  value={message}
  onChange={(event) => setMessage(event.currentTarget.value)}
  onSend={() => sendMessage(message)}
/>

Registry URL

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/chat-bar.json