Composer

A ChatGPT-style composer: a 24px-radius surface with a growing text area, attach and voice buttons, and a send circle that activates with text.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1'use client';
2
3import { TextareaComposer } from '@/components/component-kit/items/textarea-composer';
4
5export function Example() {
6  return (
7    <TextareaComposer
8      placeholder="Ask anything"
9      onSubmit={(text) => console.log(text)}
10      onAttach={() => console.log('attach')}
11      onVoice={() => console.log('voice')}
12    />
13  );
14}

Props

Composer properties
Prop	Type	Default	Description
`onSubmit`	`(value: string) => void`	`—`	Called with the trimmed text on Enter or the send button.
`onAttach`	`() => void`	`—`	Shows the attach button when provided.
`onVoice`	`() => void`	`—`	Shows the microphone button when provided.
`sending`	`boolean`	`false`	Disables sending while a request is in flight.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1'use client';
2
3import { TextareaComposer } from '@/components/component-kit/items/textarea-composer';
4
5export function Example() {
6  return (
7    <TextareaComposer
8      placeholder="Ask anything"
9      onSubmit={(text) => console.log(text)}
10      onAttach={() => console.log('attach')}
11      onVoice={() => console.log('voice')}
12    />
13  );
14}

Props

Composer properties
Prop	Type	Default	Description
`onSubmit`	`(value: string) => void`	`—`	Called with the trimmed text on Enter or the send button.
`onAttach`	`() => void`	`—`	Shows the attach button when provided.
`onVoice`	`() => void`	`—`	Shows the microphone button when provided.
`sending`	`boolean`	`false`	Disables sending while a request is in flight.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1'use client';
2
3import { TextareaComposer } from '@/components/component-kit/items/textarea-composer';
4
5export function Example() {
6  return (
7    <TextareaComposer
8      placeholder="Ask anything"
9      onSubmit={(text) => console.log(text)}
10      onAttach={() => console.log('attach')}
11      onVoice={() => console.log('voice')}
12    />
13  );
14}

Props

Composer properties
Prop	Type	Default	Description
`onSubmit`	`(value: string) => void`	`—`	Called with the trimmed text on Enter or the send button.
`onAttach`	`() => void`	`—`	Shows the attach button when provided.
`onVoice`	`() => void`	`—`	Shows the microphone button when provided.
`sending`	`boolean`	`false`	Disables sending while a request is in flight.

Composer

A ChatGPT-style composer: a 24px-radius surface with a growing text area, attach and voice buttons, and a send circle that activates with text.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1'use client';
2
3import { TextareaComposer } from '@/components/component-kit/items/textarea-composer';
4
5export function Example() {
6  return (
7    <TextareaComposer
8      placeholder="Ask anything"
9      onSubmit={(text) => console.log(text)}
10      onAttach={() => console.log('attach')}
11      onVoice={() => console.log('voice')}
12    />
13  );
14}

Props

Composer properties
Prop	Type	Default	Description
`onSubmit`	`(value: string) => void`	`—`	Called with the trimmed text on Enter or the send button.
`onAttach`	`() => void`	`—`	Shows the attach button when provided.
`onVoice`	`() => void`	`—`	Shows the microphone button when provided.
`sending`	`boolean`	`false`	Disables sending while a request is in flight.