gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/plan.md

Plan

URL: /components/plan

---

title: Plan description: A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations. path: elements/components/plan

---

The Plan component provides a flexible system for displaying AI-generated execution plans with collapsible content. Perfect for showing multi-step workflows, task breakdowns, and implementation strategies with support for streaming content and loading states.

Installation

Usage

import { Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger } from "@/components/ai-elements/plan";

<Plan defaultOpen={false}>
    <PlanHeader>
        <div>
            <PlanTitle>Implement new feature</PlanTitle>
            <PlanDescription>Add authentication system with JWT tokens and refresh logic.</PlanDescription>
        </div>
        <PlanTrigger />
    </PlanHeader>
    <PlanContent>
        <div className="space-y-4 text-sm">
            <div>
                <h3 className="mb-2 font-semibold">Overview</h3>
                <p>This plan outlines the implementation strategy...</p>
            </div>
        </div>
    </PlanContent>
    <PlanFooter>
        <Button>Execute Plan</Button>
    </PlanFooter>
</Plan>

Features

• Collapsible content with smooth animations
• Streaming support with shimmer loading states
• Built on shadcn/ui Card and Collapsible components
• TypeScript support with comprehensive type definitions
• Customizable styling with Tailwind CSS
• Responsive design with mobile-friendly interactions
• Keyboard navigation and accessibility support
• Theme-aware with automatic dark mode support
• Context-based state management for streaming

Props

<Plan />

<TypeTable type={{ isStreaming: { description: 'Whether content is currently streaming. Enables shimmer animations on title and description.', type: 'boolean', default: 'false', }, defaultOpen: { description: 'Whether the plan is expanded by default.', type: 'boolean', }, '...props': { description: 'Any other props are spread to the Collapsible component.', type: 'React.ComponentProps', }, }} />

<PlanHeader />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the CardHeader component.', type: 'React.ComponentProps', }, }} />

<PlanTitle />

<TypeTable type={{ children: { description: 'The title text. Displays with shimmer animation when isStreaming is true.', type: 'string', }, '...props': { description: 'Any other props (except children) are spread to the CardTitle component.', type: 'Omit<React.ComponentProps, "children">', }, }} />

<PlanDescription />

<TypeTable type={{ children: { description: 'The description text. Displays with shimmer animation when isStreaming is true.', type: 'string', }, '...props': { description: 'Any other props (except children) are spread to the CardDescription component.', type: 'Omit<React.ComponentProps, "children">', }, }} />

<PlanTrigger />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon.', type: 'React.ComponentProps', }, }} />

<PlanContent />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the CardContent component.', type: 'React.ComponentProps', }, }} />

<PlanFooter />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the div element.', type: 'React.ComponentProps<"div">', }, }} />

<PlanAction />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the CardAction component.', type: 'React.ComponentProps', }, }} />