Plan

A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.

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

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

Plan

Installation

Features

Props

`<Plan />`

`<PlanHeader />`

`<PlanTitle />`

`<PlanDescription />`

`<PlanTrigger />`

`<PlanContent />`

`<PlanFooter />`

`<PlanAction />`