Overview

Watermelon UI is a component platform built end-to-end during an internship — discovery, high-fidelity previews, install docs, changelog, and a registry that scales as new components land. The goal was one trusted surface for finding, evaluating, and adopting UI patterns.

Problem

Internal UI references were scattered. Teams rediscovered the same patterns in Figma files, Slack threads, and half-documented Storybook entries. Adoption was slow because there was no clear path from “I need this” to “I can install it.”

Role

Owned architecture and shipping from discovery to launch. Partnered with design and product on hierarchy and interaction quality. Built docs and registry workflows so additions don’t break existing pages. Polished search, preview, changelog, and navigation.

What shipped

Categorized side navigation, search-first browsing, and a featured surface for high-value patterns — so finding a component doesn’t require knowing its name.

Dual preview/code workflow, install blocks built for copy-paste, and full-page plus inline preview modes. Metadata stays consistent so the registry can grow without one-off page templates.

Release notes and version history so teams can trust what changed and when — critical when components are shared across products.

Screens

Screens

Walkthrough

Outcome

The platform standardized docs, preview metadata, and releases into a single loop: discover → preview → install → customize. Teams share one source of truth instead of hunting through informal references.

Stack

Next.js, TypeScript, Tailwind CSS, Shadcn UI, Motion, MDX.