Components
Display a plan title and summary with expand/collapse and an Approve action. State-driven (idle / pending). Self-contained port from 21st.dev Agent Elements without the Markdown dep — summary renders as plain prose.
npx shadcn@latest add https://21st.dev/r/21stdev/plan-toolLoading preview...
import { PlanTool } from "@/components/ui/plan-tool";
const plan = {
id: "plan-1",
title: "Refresh UI previews",
summary:
"Unify tool card spacing and interaction patterns so docs previews feel cohesive across all tool components. Standardize card chrome (header height, borders, radius, and muted labels) for Plan, Approval, Edit, Search, and Todo previews. Align content density and typography so title, metadata, and body text read consistently at a glance. Normalize interaction states: loading shimmer, pending indicators, hover affordances, and disabled action buttons. Validate responsive behavior on narrow widths, including truncation rules and action-row wrapping. Run a visual QA pass in both light and dark themes and tighten spacing where cards feel too loose or cramped. Outcome: preview gallery feels intentionally designed, easier to scan, and stable across viewport sizes.",
};
export default function Demo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<div className="w-full max-w-md">
<PlanTool state="idle" plan={plan} />
</div>
</div>
);
}