# 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.

<Preview path="plan" />

## Installation

<ElementsInstaller path="plan" />

## Usage

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

```tsx
<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<typeof Collapsible>',
  },
}}
/>

### `<PlanHeader />`

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

### `<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<typeof CardTitle>, "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<typeof CardDescription>, "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<typeof CollapsibleTrigger>',
  },
}}
/>

### `<PlanContent />`

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

### `<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<typeof CardAction>',
  },
}}
/>