AI Fill

The shimmer and ring a field plays when a model fills it in.

Who this audience is

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/ai-fill.json

Usage

Wrap the field and change `play` whenever an answer lands. It replays in place, so the field keeps its text and focus.

TSImport

import { AiFill, AiFillCaption } from "@/components/ui/ai-fill";

TSExample

import * as React from "react";
import { AiFill } from "@/components/ui/ai-fill";
import { Input } from "@/components/ui/input";

export function Example() {
  const [value, setValue] = React.useState("");
  const [play, setPlay] = React.useState(0);

  async function suggest() {
    setValue(await suggestAudience()); // your model call
    setPlay((n) => n + 1); // replays the fill, in place
  }

  return (
    <AiFill play={play}>
      <Input value={value} onChange={(e) => setValue(e.target.value)} />
    </AiFill>
  );
}

Composition

Anatomy of AiFill and its caption.

AiFill                            (wraps any field; replays in place)
├── play={token}                  (change it to play again)
├── effect="both | sweep | ring"  (default "both")
├── working                       (loop the sweep while the model answers)
└── children                      (the field: Input, Select, Textarea, a composer…)

AiFillCaption                     (the field's caption)
├── active                        (show the sparkle + label)
├── label="Suggested by AI"
└── children                      (the caption at rest)

Input

Wrap the field and bump `play` when the answer lands.

Caption

`AiFillCaption` swaps the field's caption to a sparkle and a label while the fill is fresh, then back.

Who this audience is

Working

`working` loops the sweep while the model answers; the answer landing plays the fill once.

Effects

`effect` plays both, only the sweep, or only the ring.

API Reference

Props exposed by AiFill and AiFillCaption.

AiFill

Prop	Type	Default	Description
`play`	unknown	—	Change it to play the fill again — a counter, the answer's id, the answer itself. `undefined`, `null`, `false` and `0` never play. Replays in place: the field is not remounted.
`effect`	"both" \| "sweep" \| "ring"	"both"	The shimmer sweep and the brand ring, or one of them.
`working`	boolean	false	Loops the sweep while a model is still answering.
`className`	string	—	Give it the field's own radius if it is not `rounded-md`.

AiFillCaption

Prop	Type	Default	Description
`active`	boolean	—	Swap to the sparkle and `label`.
`label`	string	"Suggested by AI"	What the caption says while active.
`children`	string	—	The caption at rest.