Radio Card

Card-shaped radio controls for selecting ZGI agents, workflow modes, data sources, and other operational options.

AgentConversation runtimeBest for chat and voice workflows.

WorkflowMulti-step automationRun structured tasks with tools.

DataKnowledge sourceAttach datasets and tables.

"use client"

import { useState } from "react"
import { BotIcon, DatabaseIcon, WorkflowIcon } from "lucide-react"

import { RadioCard, RadioCardGroup } from "@/components/ui/radio-card"

export function RadioCardDemo() {
  const [value, setValue] = useState("agent")

  return (
    <RadioCardGroup
      value={value}
      onValueChange={setValue}
      className="w-full max-w-xl grid-cols-1 sm:grid-cols-3"
    >
      <RadioCard
        value="agent"
        icon={<BotIcon className="size-5" />}
        title="Agent"
        subtitle="Conversation runtime"
        description="Best for chat and voice workflows."
      />
      <RadioCard
        value="workflow"
        icon={<WorkflowIcon className="size-5" />}
        title="Workflow"
        subtitle="Multi-step automation"
        description="Run structured tasks with tools."
      />
      <RadioCard
        value="data"
        icon={<DatabaseIcon className="size-5" />}
        title="Data"
        subtitle="Knowledge source"
        description="Attach datasets and tables."
      />
    </RadioCardGroup>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.zgi.ai/r/radio-card.json

Usage

import { RadioCard, RadioCardGroup } from "@/components/ui/radio-card"

<RadioCardGroup value={mode} onValueChange={setMode}>
  <RadioCard value="agent" title="Agent" description="Conversation runtime" />
  <RadioCard value="workflow" title="Workflow" description="Structured tasks" />
</RadioCardGroup>

API Reference

RadioCard

Prop	Type	Description
value	`string`	Radio value
icon	`ReactNode`	Optional leading icon
title	`ReactNode`	Primary label
subtitle	`ReactNode`	Secondary label
description	`ReactNode`	Supporting copy
hiddenRadio	`boolean`	Hide the circular radio indicator

RadioCardGroup

Prop	Type	Description
value	`string`	Selected value
onValueChange	`(value: string) => void`	Selection handler
name	`string`	Optional radio group name

Provider Status Card Resource Card

On This Page

Installation Usage API Reference RadioCard RadioCardGroup

Deploy and Scale Agents with ZGI

ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.