CreateOrganization

Full-bleed glass form for creating new organizations with validated name/slug, logo uploader, and optional invite step.

Live Demo

Try creating an organization to see the form in action

Tips

  • Logo handling: Upload images to object storage and store CDN URLs to avoid large data URLs in your DB.
  • Slug validation: Check slug uniqueness server-side and return a clear error to the client when conflicts occur.
  • Accessibility: Ensure modal dialogs trap focus and that labels are tied to inputs.
  • Testing: Mock file uploads and verify afterCreateOrganizationUrl redirects in end-to-end tests.

Installation

Terminal

Basic Usage

NewOrgPage.tsx

Persisting Uploaded Logos

By default the component converts the image to a Base64 data URL and posts it as logoUrl. Use the handler below as a starting point for piping it into object storage, CDN uploads, or your own media service.

app/api/organizations/route.ts
  • • Validate file size/type server-side before writing to disk.
  • • Replace the data URL with the final CDN URL once uploaded.
  • • Store the path in Organization.logoUrl so other components (like the switcher) render it automatically.

Features

✓ Name & Slug Validation

Auto-generates URL-friendly slugs

�️ Drag-and-drop Logo Uploader

Instant preview with 2MB guardrails

⚙️ Initial Settings

Configure organization settings on creation

📧 Member Invites

Optionally invite members during creation

👤 Auto Owner Assignment

Creator becomes organization owner