Sivir UI
Studio 64

Composer

A focused prompt surface with growing input, composable actions, and submission state.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add composer

Usage

Bind the prompt value and handle submission on the root. The component awaits async handlers and shows its submitting state automatically.

import * as Composer from '@sivir-ui/svelte/components/composer';

let value = $state('');

async function sendPrompt(prompt: string) {
  await saveMessage(prompt);
  value = '';
}

<Composer.Root bind:value onSubmit={sendPrompt}>
  <Composer.Input placeholder="Ask anything..." />
  <Composer.Toolbar>
    <Composer.Actions>
      <!-- Add attachment, model, or permission controls here. -->
    </Composer.Actions>
    <Composer.Submit />
  </Composer.Toolbar>
</Composer.Root>

By default, submits and inserts a new line. Set submitOnEnter=false on Input when Enter should always create a new line.

Examples

Use explicit states when submission is managed outside the component.

Idle

Submitting

Error

Toolbar inset

The toolbar defaults to the frame chrome outside the input well. Set variant="inset" to merge it into the same inset surface as the input.

Anatomy

Composer.Root - Manages prompt submission.

Composer.Input - Accepts the prompt text.

Composer.Toolbar - Groups composer controls.

Composer.Actions - Groups composer actions.

Composer.Submit - Submits or stops the prompt.