Extensions

SendAurora

Anchored ChatComposer extension: a blurred aurora backdrop that sweeps up once per sent message — activated from skin.config via the chat-composer:send-layer anchor.

AnchoredFills the chat-composer:send-layer anchor: the component owns the positioned wrapper (aria-hidden, pointer-events-none, paint-contained) and renders zero DOM until a skin.config fills it — install the item, activate it from skin.config, pay nothing anywhere else.

First install and activate one skin. Core deliberately contains no visual token defaults.

Installs to components/control-ui/extensions/send-aurora.tsx. Extensions are optional items layered on the library — no component bundle carries them.

Registry command

npx shadcn@latest add https://control-ui.dev/r/send-aurora.json

See registry manifest

Activation

Fill the anchor from skin.config — your app brand or an installed pack, same gesture. The ctx is a render prop: sendCount replays the sweep once per send; ChatComposer owns the positioned wrapper (aria-hidden, pointer-events-none, paint-contained), the extension only supplies visuals.

tsx

// skin.config.tsx (import the "use client" extension; the config itself stays RSC-pure)

import { SendAurora } from "@/components/control-ui/extensions/send-aurora";

export const skin: ControlUiSkin = {

id: "my-brand",

adornments: {

"chat-composer": {

"send-layer": (ctx) => <SendAurora sendCount={ctx.sendCount} />,

},

};

Source

Owned source and private support files

src/registry/sources/control-ui/extensions/send-aurora.tsx

"use client";

import type { CSSProperties } from "react";

export type SendAuroraProps = {

sendCount: number;

colors?: readonly [string, string, string, string, string];

};

const AURORA_BANDS = [1, 2, 3, 4, 5] as const;

const AURORA_COLUMNS = ["left", "center", "right"] as const;

type AuroraPaletteStyle = CSSProperties & Record<"--aurora-1" | "--aurora-2" | "--aurora-3" | "--aurora-4" | "--aurora-5", string>;

export function SendAurora({ sendCount, colors }: SendAuroraProps) {

if (sendCount === 0) return null;

const paletteOverride: AuroraPaletteStyle | undefined = colors

? {

"--aurora-1": colors[0],

"--aurora-2": colors[1],

"--aurora-3": colors[2],

"--aurora-4": colors[3],

"--aurora-5": colors[4],

}

: undefined;

return (

<div key={sendCount} data-send-aurora="" className="flex size-full items-stretch" style={paletteOverride}>

{AURORA_COLUMNS.map((column) => (

<div key={column} data-column={column} className="flex h-full w-full flex-col items-stretch -space-y-3">

{AURORA_BANDS.map((band) => (

<div key={band} data-band={band} className="w-full flex-1" />

))}

</div>

))}

</div>

);

}