Getting Started with ReactDrop: Share Components in 60 Seconds

ReactDrop turns any React component into a shareable link. Here is how to get started.

Step 1: Write Your Component

Create a React component in a .tsx file. It needs a default export:

export default function Greeting({ name = "World" }) {
  return (
    <div className="p-8 text-center">
      <h1 className="text-3xl font-bold">Hello, {name}!</h1>
      <p className="text-gray-500 mt-2">This component is live on ReactDrop</p>
    </div>
  )
}

ReactDrop supports Tailwind CSS out of the box, plus 30+ libraries including Radix UI, Recharts, Framer Motion, and Zod.

Step 2: Validate It

Before creating a gist, check your component will work.

1. Go to reactdrop.verdient.co.uk/validate
2. Paste your code into the editor
3. The validator runs five checks:
   • Code size (max 50KB)
   • Component detection (must use PascalCase)
   • Default export (required, or auto-added)
   • No forbidden imports (Node.js modules blocked)
   • Supported libraries (must be on the allowlist)
4. If all checks pass, click Preview Component to see it rendered live

Step 3: Create a GitHub Gist

1. Go to gist.github.com
2. Create a new gist with a .tsx file containing your component
3. Copy the gist ID from the URL (the 32-character hex string)

Step 4: Host It

Paste the gist ID at reactdrop.verdient.co.uk or visit reactdrop.verdient.co.uk/{gist-id} directly.

You will get:

• A live rendered preview
• An auto-generated shareable link (e.g. /share/a7k3m9x2)
• The option to customise your link to something memorable
• A “View on GitHub” link back to the original gist

Tips

• Use Tailwind classes — full utility CSS support, no configuration needed
• Keep it under 50KB — components should be focused and self-contained
• Test with the validator first — catches issues before you create the gist
• Customise your share link — replace the random ID with a readable name

Available Libraries

ReactDrop bundles these libraries automatically:

Category	Libraries
UI	Radix UI (27 primitives), Lucide React, Vaul, cmdk
Forms	React Hook Form, Zod, @hookform/resolvers
Charts	Recharts
Animation	Framer Motion
Utilities	lodash, date-fns, clsx, tailwind-merge, nanoid
Styling	Tailwind CSS, class-variance-authority

No installation or configuration required — just import and use.

What’s Next

Try it now at reactdrop.verdient.co.uk. If you have questions, email tom@verdient.co.uk.