Bar() — ui Function Reference

Architecture documentation for the Bar() function in elevenlabs.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Bar() — ui Function Reference

Dependency Diagram

graph TD
  17f8ff81_bc18_7bfe_06df_a8733661538a["Bar()"]
  a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab["elevenlabs.tsx"]
  17f8ff81_bc18_7bfe_06df_a8733661538a -->|defined in| a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab
  style 17f8ff81_bc18_7bfe_06df_a8733661538a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/elevenlabs.tsx lines 627–642

}>(({ heightPct, isHighlighted, state }) => (
  <div
    data-highlighted={isHighlighted}
    className={cn(
      "max-w-[12px] min-w-[8px] flex-1 transition-all duration-150",
      "rounded-full",
      "bg-border data-[highlighted=true]:bg-primary",
      state === "speaking" && "bg-primary",
      state === "thinking" && isHighlighted && "animate-pulse"
    )}
    style={{
      height: `${heightPct}%`,
      animationDuration: state === "thinking" ? "300ms" : undefined,
    }}
  />
))