# Prompt composer
> Chat input with an aurora border and an effort chip; Enter sends and fires a `send` event with the text and effort level.
- Element: `<hf-composer>`
- React: `import { HfComposer } from "@/components/lumesec/hf-composer"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-composer.json
- Page: https://elements.lumesec.ai/components/pixel-hd/composer



Live preview: https://elements.lumesec.ai/view/hf-composer

```html
<hf-composer effort="ultracode" placeholder="Ask Claude to build something…"></hf-composer>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-composer
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-composer.json
```

## Usage

React:

```tsx
import { HfComposer } from "@/components/lumesec/hf-composer";

export function Example() {
  return (
    <HfComposer effort="ultracode" placeholder="Ask Claude to build something…" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-composer.js"></script>

<hf-composer effort="ultracode" placeholder="Ask Claude to build something…"></hf-composer>
```

## Behaviour

A chat input whose border is an aurora of dots. The effort chip cycles through levels and the band gets brighter with each step; sending launches a wave from right to left and fires a `send` event with the text and effort.

## API reference

### Attributes

| Attribute     | React prop    | Type                                        | Default            | Description                                                                   |
| ------------- | ------------- | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------- |
| `placeholder` | `placeholder` | `string`                                    | `Reply to Claude…` | Textarea placeholder.                                                         |
| `model`       | `model`       | `string`                                    | `Opus 5.5`         | Model name shown as plain text in the toolbar.                                |
| `effort`      | `effort`      | `low \| medium \| high \| max \| ultracode` | `high`             | Initial effort level, case-insensitive. An unrecognised value selects `High`. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                             | Description                                                                                                                                                           |
| -------- | ---------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `send`   | `onSend`   | `{ text: string, effort: string }` | Fires when a non-empty message is sent. `text` is trimmed; `effort` is the level label (`Low`, `Medium`, `High`, `Max` or `Ultracode`). The textarea is then cleared. |
| `effort` | `onEffort` | `{ effort: string }`               | Fires when the user cycles the effort chip. `effort` is the new level label.                                                                                          |

## Keyboard

| Keys        | Action                                            |
| ----------- | ------------------------------------------------- |
| Enter       | Send the message. Ignored during IME composition. |
| Shift+Enter | Insert a new line.                                |

## Accessibility

* The textarea has `aria-label="Message"`.
* The effort chip is a native button labelled `Effort: <level>. Click to change.`
* The send button is a native button labelled `Send` and is disabled while the textarea is empty.
* A status line in an `aria-live="polite"` region shows the keyboard hint and, for 2.6 s after sending, the effort used.
* Reduced motion: the aurora is drawn once and does not move, the send wave and sparks are skipped, and the chip and status text swap without rolling.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-foreground` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted`, `--ui-on-accent` and `--ui-surface`.

## Notes

* All attributes are read once on first connect and are not observed.
* The chip cycles Low, Medium, High, Max, Ultracode and back to Low. Ultracode brightens the band.
* The textarea grows with its content up to 160px.