Radial Flow

Dynamic radial graph for visualizing networks & hierarchies with animated nodes.

Productivity

ChatGPT

DeepSeek

Gemini

Claude

Mistral

Grok

LLaMA

Copilot

Perplexity

Anthropic

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/radialflow.json

Usage

import { Topic, RadialFlow } from "@/components/ui/Radialflow";
 
const demoTopics: Topic[] = [
  { id: "chatgpt", name: "ChatGPT", position: { x: 10, y: 20 }, color: "#F0DB4F", highlighted: true },
  { id: "deepseek", name: "DeepSeek", position: { x: 10, y: 35 }, color: "#F0DB4F", highlighted: true },
  { id: "gemini", name: "Gemini", position: { x: 10, y: 50 }, color: "#F0DB4F", highlighted: true },
  { id: "claude", name: "Claude", position: { x: 10, y: 65 }, color: "#F0DB4F", highlighted: true },
  { id: "mistral", name: "Mistral", position: { x: 10, y: 80 }, color: "#F0DB4F", highlighted: true },
  { id: "grok", name: "Grok", position: { x: 90, y: 20 }, color: "#F0DB4F", highlighted: true },
  { id: "llama", name: "LLaMA", position: { x: 90, y: 35 }, color: "#F0DB4F", highlighted: true },
  { id: "copilot", name: "Copilot", position: { x: 90, y: 50 }, color: "#F0DB4F", highlighted: true },
  { id: "perplexity", name: "Perplexity", position: { x: 90, y: 65 }, color: "#F0DB4F", highlighted: true },
  { id: "anthropic", name: "Anthropic", position: { x: 90, y: 80 }, color: "#F0DB4F", highlighted: true },
];

<RadialFlow
  topics={demoTopics}
  badgeName="Productivity"
  centralDotColor="#FFFFFF"
/>

API Reference

Radial Flow

Radial Flow - displays connected nodes in a radial layout. Configure topics, colors, and center badge via props.

Props

Property	Type	Default	Description
`topics`	Array<{ id: string; name: string; position: { x: number; y: number }; color: string; highlighted: boolean; }>	`required`	Array of topic nodes with ID, label, position, color, and highlight state.
`badgeName`	string	`required`	Label displayed in the center badge.
`centralDotColor`	string	`"#FFFFFF"`	Color of the center badge dot.