Interactive Kanban Board with Task State Persistence
Generates a complete Kanban task management board supporting column reordering, task creation, tag filters, and local storage.
Customize Placeholders in Real-Time
Configure columns to match your sprint workflow (e.g. Triage, In Dev, QA, Released).
Build an interactive Kanban Task Management Board as a Claude Artifact in React. Requirements: 1. Columns: "Backlog", "In Progress", "Code Review", and "Done" with task counters. 2. Task Cards: Title, priority badge (Low, Medium, High, Urgent), assignee avatar, due date, and subtask progress bar (e.g. 2/4 completed). 3. Drag & Drop: Drag cards between columns with smooth hover highlighting and reordering. 4. Task Creation: Quick inline "Add Task" button at the bottom of each column with title and priority input. 5. Search & Filter: Filter cards by priority or assignee name. 6. Card Details Modal: Clicking a card opens a modal to view descriptions and toggle subtask checkboxes. 7. Dark theme design with distinctive column border colors and keyboard accessibility.
Optimization Tips & Parameters
Drag cards into the "Done" column to observe automatic status badge updates.
Associated Tags & Use Cases
More claude artifacts ui Prompts
View full library →
1:1Production SaaS Analytics Dashboard with Dynamic Charts
Prompts Claude 3.5 Sonnet to generate a self-contained, interactive single-file React Artifact with live filters, KPIs, and responsive charts.
Create a comprehensive, production-grade SaaS Financial & User Analytics Dashboard as a single-file interactive React Artifact. Requirements: 1. Tech Stack: React 18, Tailwind CSS, Lucide React icons, and Recharts (or pure SVG responsive charts). 2. KPI Cards: MRR ($124,500 +14.2%), Active Subscribers (3,420 +8.1%), Churn Rate (1.2% -0.4%), and LTV ($2,890). Include sparkline trend graphs. 3. Interactive Controls: Date range selector (Last 7 Days, 30 Days, 90 Days, 1 Year), Plan filter (All, Starter, Pro, Enterprise), and Currency switcher. 4. Visualizations: - Monthly Revenue & Expenses Stacked Area Chart with interactive tooltips. - Cohort Retention Heatmap matrix. - Top conversion channels breakdown bar chart. 5. Interactive Data Table: Recent high-value transactions with search, status badges (Paid, Pending, Refunded), sortable columns, and pagination. 6. Design: Modern dark-slate aesthetic (#0B0F19 background, subtle glassmorphism borders, accessible typography, smooth hover transitions). Provide the complete executable JSX/TSX without placeholders.
1:1Multi-Agent Autonomous Chat Interface with Live Stream
Creates a full-featured AI chat workspace artifact with agent switching, markdown message rendering, prompt starters, and token metrics.
Build a production-ready AI Copilot Chat Interface as an interactive Claude Artifact. Features required: 1. Sidebar: Conversation history with search, model/agent selector (Research Agent, Code Architect, Copywriter), and memory retention toggle. 2. Main Chat: - Message bubbles with distinct user/assistant styling. - Streaming simulated typing effect with cancel button. - Code blocks with syntax copy buttons and language pills. - Model latency (ms) and token counter telemetry pills. 3. Interactive Bottom Bar: Auto-resizing textarea, file attachment pill simulation, quick prompt chips, and voice input toggle button. 4. UI States: Empty state with starter prompts, active conversation state, and loading skeleton state. 5. Deliver as a complete, fully functional React component using Tailwind CSS and Lucide icons.
1:1Interactive Drag-and-Drop Workflow Diagram Editor
Renders an interactive canvas artifact for connecting workflow nodes with dynamic bezier curves and state management.
Create an interactive Node-Based Workflow Builder as a single-file Claude Artifact in React. Requirements: 1. Canvas: Infinite-feeling grid canvas with pan and zoom controls (+, -, reset). 2. Draggable Nodes: Nodes representing "Webhook Trigger", "LLM Processing", "Branch Condition", and "Database Write". 3. Dynamic Connections: Draw smooth SVG cubic bezier curves between node connector ports that update dynamically as nodes are dragged. 4. Node Inspector: Clicking a node opens a side properties panel to edit node label, parameters, and retry count. 5. Export: Button to export the graph state to structured JSON. 6. Styling: High-tech dark theme, crisp SVG paths, glowing connection ports, and keyboard shortcut helpers. Complete executable code.