libraries-dev

Use the ThinkingOrb component from the thinking-orbs package with a state matching the activity, such as searching, solving, or composing. Place it beside a text label or in the assistant avatar slot, and only show it for waits of 2 seconds or more.

The border-beam package provides a BorderBeam wrapper component that draws a travelling or pulsing glow around an element. Use size="line" for search inputs, pulse-inner for buttons, and set active from your loading flag for waits over 3 seconds.

Yes, but all seven libraries use hooks and ship no "use client" directive, so you must import them from a file marked "use client". Canvas and WebGL components render on the client only, and some need a mounted gate to avoid hydration mismatches.

Use VoiceBeam from voice-glow with the useMicrophone hook, passing mic.stream to the component wrapped around your chat input. Call mic.start() from a user gesture, and set processing while transcribing after the user stops speaking.

Avoid metal-fx when you need multiple metal colours on one page, since all instances share one renderer and material. Avoid liquid-gooey in dense lists or static layouts, since each group runs an SVG filter that WebKit rasterises on the CPU.

The component reads the border radius from the wrapper's first element child, falling back to 16px if missing. Put the rounded element directly inside BorderBeam, and note that most types clip overflow, so portal dropdowns and shadows out.