Skip to content
NewService Map: 30 components for hosts, ports and routes
<hf-composer>Custom elementControlsFree

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.

View as Markdown
<hf-composer>

Trytype something and press Enter, or click the effort chip.

Playground

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

Loading <hf-composer>
Props
placeholderremounts
modelremounts
effortremounts
<HfComposer
  placeholder="Ask Claude to build something…"
  model="Opus 5.5"
  effort="ultracode"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-composer
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-composer.json

Usage

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

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

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

placeholderReact propplaceholderTypestringDefaultReply to Claude…

Textarea placeholder.

modelReact propmodelTypestringDefaultOpus 5.5

Model name shown as plain text in the toolbar.

effortReact propeffortTypelow | medium | high | max | ultracodeDefaulthigh

Initial effort level, case-insensitive. An unrecognised value selects High.

Events

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

sendReact proponSendDetail{ 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.

effortReact proponEffortDetail{ effort: string }

Fires when the user cycles the effort chip. effort is the new level label.

Keyboard

KeysAction
EnterSend the message. Ignored during IME composition.
Shift+EnterInsert 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.

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.

Related

<hf-button>
Buttonhf-buttonOpen Button
<hf-switch>
Switchhf-switchOpen Switch
<hf-segmented>
Segmented controlhf-segmentedOpen Segmented control
<hf-input>
Text fieldhf-inputOpen Text field

Was this page helpful?