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.

Rewrite AI Elements to SolidJS

Rewrite the AI Elements component library from React to SolidJS while maintaining compatibility with existing React-based shadcn/ui components using solid-js/compat, updating all 29 components and their test suite.

Installation

npx ai-elements@latest add plan

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 />`

isStreaming?:

boolean

Whether content is currently streaming. Enables shimmer animations on title and description. Defaults to false.

defaultOpen?:

boolean

Whether the plan is expanded by default.

[...props]?:

React.ComponentProps<typeof Collapsible>

Any other props are spread to the Collapsible component.

`<PlanHeader />`

[...props]?:

React.ComponentProps<typeof CardHeader>

Any other props are spread to the CardHeader component.

`<PlanTitle />`

children:

string

The title text. Displays with shimmer animation when isStreaming is true.

[...props]?:

Omit<React.ComponentProps<typeof CardTitle>, "children">

Any other props (except children) are spread to the CardTitle component.

`<PlanDescription />`

children:

string

The description text. Displays with shimmer animation when isStreaming is true.

[...props]?:

Omit<React.ComponentProps<typeof CardDescription>, "children">

Any other props (except children) are spread to the CardDescription component.

`<PlanTrigger />`

[...props]?:

React.ComponentProps<typeof CollapsibleTrigger>

Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon.

`<PlanContent />`

[...props]?:

React.ComponentProps<typeof CardContent>

Any other props are spread to the CardContent component.

`<PlanFooter />`

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the div element.

`<PlanAction />`

[...props]?:

React.ComponentProps<typeof CardAction>

Any other props are spread to the CardAction component.