Bar() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Bar() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/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,
    }}
  />
))