Plan
A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
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.
Overview
This plan outlines the migration strategy for converting the AI Elements library from React to SolidJS, ensuring compatibility and maintaining existing functionality.
Key Steps
- Set up SolidJS project structure
- Install solid-js/compat for React compatibility
- Migrate components one by one
- Update test suite for each component
- Verify compatibility with shadcn/ui
Installation
If you prefer using jsrepo, please install via the command below:
Props
Plan
The main wrapper component that provides context and collapsible functionality.
Plan
| Prop | Type | Default | Description |
|---|---|---|---|
isStreaming | boolean | false | Whether the plan is in streaming state (shows shimmer effect) |
defaultOpen | boolean | false | Whether the plan is expanded by default |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
class | string | - | Additional CSS classes to apply |
children | Snippet | - | Plan content (PlanHeader, PlanContent, PlanFooter) |
PlanTitle
Displays the plan title with automatic shimmer effect during streaming.
PlanTitle
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Title content (automatically gets shimmer effect when isStreaming is true) |
class | string | - | Additional CSS classes to apply |
PlanDescription
Displays the plan description with automatic shimmer effect during streaming.
PlanDescription
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Description content (automatically gets shimmer effect when isStreaming is true) |
class | string | - | Additional CSS classes to apply |
PlanContent
The collapsible content area for plan details.
PlanContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Collapsible content |
class | string | - | Additional CSS classes to apply |
Other Components
Additional components for plan structure:
- PlanHeader - Header section containing title, description, and trigger
- PlanAction - Wrapper for action elements (trigger, buttons)
- PlanTrigger - Toggle button with chevron icon to expand/collapse
- PlanFooter - Footer section for additional actions
Notes
- The isStreaming prop automatically applies shimmer effects to PlanTitle and PlanDescription components.
- Built on top of shadcn-svelte's Card, Button, and Collapsible components.
- Uses the Shimmer component internally for streaming animations.
- Fully accessible with proper ARIA labels and keyboard navigation support via the underlying Collapsible component.
- Perfect for displaying AI-generated execution plans, task breakdowns, and multi-step processes.