Publish New UI Component

Provide single-file React code. It will render in real-time in the live sandbox.

Component Metadata

Title

Description

Category

Price (USD)

Set to 0 for free

Tags (comma separated)

Creator Revenue

You retain 85% of each sale. Payouts are transferred automatically via Stripe Connect.

Customize the starter code before publishing

Single-File Code (.tsx)Declare `const App = () => ...`

Replace this starter template with your own custom component code.

const App = () => {
  const [active, setActive] = React.useState(false);

return (
    <div className="flex flex-col items-center justify-center p-8 bg-gradient-to-br from-base-100 to-base-200 rounded-3xl border border-base-300 shadow-xl max-w-sm w-full transition-all">
      <div className="w-16 h-16 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-4 transition-transform hover:scale-110">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
        </svg>
      </div>
      <h3 className="font-extrabold text-xl mb-1 text-base-content">Custom Micro-Widget</h3>
      <p className="text-xs text-base-content/60 text-center mb-6">
        Styled with Tailwind CSS & DaisyUI. Fully responsive & isolated.
      </p>
      <button 
        onClick={() => setActive(!active)} 
        className={`btn btn-block transition-all duration-300 ${active ? 'btn-success' : 'btn-primary'}`}
      >
        {active ? 'State Activated ✨' : 'Click to Toggle State'}
      </button>
    </div>
  );
};

Live Preview

Live Preview Output