About
An editable plain-text or Markdown draft card with inline copy-to-clipboard and download actions, plus loading, streaming, empty, and error states.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Editor Card to your project and fits it to your theme.
Code
How Text Editor Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { TextEditorCard } from "@/components/ui/text-editor-card";
export default function TextEditorCardDemo() {
return (
<TextEditorCard
label="Proposal notes"
content={"## Summary\n\nStart with the clearest recommendation."}
format="markdown"
filename="proposal-notes.md"
maxLength={1200}
onContentChange={(content) => {
// Persist only after the user leaves the textarea.
console.log(content);
}}
/>
);
}
Dependencies
More by Ahmed Shobky
View all
Charts
28