Code

Artifact

A flexible container for displaying AI-generated artifacts with header, title, description, and actions.

Counter Component

A React counter with increment and decrement buttons

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex items-center gap-4">
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span className="text-xl font-bold">{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	ReactNode	-	ArtifactHeader, ArtifactContent, etc.

Import

import { Artifact, ArtifactHeader, ArtifactClose, ArtifactTitle, ArtifactDescription, ArtifactContent } from '@blastx/ui-ai';