Plan

PreviousNext

Display AI-generated plans with collapsible details and streaming support.

Build a Todo App
Create a full-featured todo application with React and TypeScript
import {
  Plan,
  PlanAction,
  PlanContent,
  PlanDescription,
  PlanFooter,
  PlanHeader,
  PlanTitle,
  PlanTrigger,
} from "@/components/ai-elements/plan"

import { Button } from "../ui/button"

export function PlanDemo() {
  return (
    <div className="w-full max-w-2xl">
      <Plan defaultExpanded={false} isStreaming={false}>
        <PlanHeader>
          <div className="space-y-1">
            <PlanTitle>Build a Todo App</PlanTitle>
            <PlanDescription>
              Create a full-featured todo application with React and TypeScript
            </PlanDescription>
          </div>
          <PlanAction>
            <PlanTrigger />
          </PlanAction>
        </PlanHeader>
        <PlanContent>
          <div className="space-y-2 text-sm">
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">1.</span>
              <span>Set up project structure with Vite and TypeScript</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">2.</span>
              <span>
                Create todo item component with edit and delete actions
              </span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">3.</span>
              <span>Implement state management using React hooks</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">4.</span>
              <span>Add local storage persistence</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">5.</span>
              <span>Style with Tailwind CSS and add animations</span>
            </div>
          </div>
        </PlanContent>
      </Plan>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add plan

Usage

import {
  Plan,
  PlanHeader,
  PlanTitle,
  PlanDescription,
  PlanAction,
  PlanTrigger,
  PlanContent,
} from "@/components/ai-elements/plan"
<Plan isStreaming={false}>
  <PlanHeader>
    <div>
      <PlanTitle>Build a Todo App</PlanTitle>
      <PlanDescription>Create a full-featured todo application</PlanDescription>
    </div>
    <PlanAction>
      <PlanTrigger />
    </PlanAction>
  </PlanHeader>
  <PlanContent>
    {/* Plan steps */}
  </PlanContent>
</Plan>

Examples

Default

Build a Todo App
Create a full-featured todo application with React and TypeScript
import {
  Plan,
  PlanAction,
  PlanContent,
  PlanDescription,
  PlanFooter,
  PlanHeader,
  PlanTitle,
  PlanTrigger,
} from "@/components/ai-elements/plan"

import { Button } from "../ui/button"

export function PlanDemo() {
  return (
    <div className="w-full max-w-2xl">
      <Plan defaultExpanded={false} isStreaming={false}>
        <PlanHeader>
          <div className="space-y-1">
            <PlanTitle>Build a Todo App</PlanTitle>
            <PlanDescription>
              Create a full-featured todo application with React and TypeScript
            </PlanDescription>
          </div>
          <PlanAction>
            <PlanTrigger />
          </PlanAction>
        </PlanHeader>
        <PlanContent>
          <div className="space-y-2 text-sm">
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">1.</span>
              <span>Set up project structure with Vite and TypeScript</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">2.</span>
              <span>
                Create todo item component with edit and delete actions
              </span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">3.</span>
              <span>Implement state management using React hooks</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">4.</span>
              <span>Add local storage persistence</span>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-muted-foreground">5.</span>
              <span>Style with Tailwind CSS and add animations</span>
            </div>
          </div>
        </PlanContent>
      </Plan>
    </div>
  )
}

export default function Example() {
  return (
    <Plan defaultOpen={false} isStreaming={false}>
      <PlanHeader>
        <div className="space-y-1">
          <PlanTitle>Build a Todo App</PlanTitle>
          <PlanDescription>
            Create a full-featured todo application with React and TypeScript
          </PlanDescription>
        </div>
        <PlanAction>
          <PlanTrigger />
        </PlanAction>
      </PlanHeader>
      <PlanContent>
        <div className="space-y-2 text-sm">
          <div className="flex items-start gap-2">
            <span className="text-muted-foreground">1.</span>
            <span>Set up project structure</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-muted-foreground">2.</span>
            <span>Create todo item component</span>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-muted-foreground">3.</span>
            <span>Implement state management</span>
          </div>
        </div>
      </PlanContent>
    </Plan>
  )
}

Features

  • Streaming Support: Shows shimmer effect while content is streaming
  • Collapsible: Expandable/collapsible content
  • Card Layout: Built on top of the Card component

API Reference

Plan

Main plan container.

PropTypeDefaultDescription
isStreamingbooleanfalseWhether plan is currently streaming
defaultOpenbooleanfalseInitial open state
classNamestring-Custom CSS classes

PlanHeader

Header section.

PropTypeDefaultDescription
classNamestring-Custom CSS classes

PlanTitle

Plan title with shimmer support.

PropTypeDefaultDescription
childrenstring-Title text

PlanDescription

Plan description with shimmer support.

PropTypeDefaultDescription
childrenstring-Description text
classNamestring-Custom CSS classes

PlanContent

Collapsible content area.

PropTypeDefaultDescription
childrenReactNode-Plan content

PlanTrigger

Button to toggle plan visibility.

PropTypeDefaultDescription
classNamestring-Custom CSS classes