React Partner Directory

"We have a partner ecosystem" is a claim. A searchable directory with named tiers and regions is evidence. Sorted by tier so your strongest relationships lead, filterable by what a visitor actually came looking for.

Installation

npx shadcn@latest add "https://kelvinui.com/registry/partner-directory.json"

Props

PropTypeDescription
partnersPartner[]{ id, name, category, tier, description, region?, href?, verified?, logoText? }
titlestringHeading

tier is platinum, gold, silver, or listed. Cards sort by tier rank first and name second, so the ordering is a stated policy rather than an accident of array order — and a partner cannot quietly outrank another by being added earlier.

Tiers make a promise

A tier badge tells a buyer how much of your engineering attention a partner has, which they will read as a support guarantee. Publish what the tiers mean somewhere reachable, and keep listed genuinely distinct — a directory where everyone is Platinum conveys nothing and gets discounted immediately.

verified is a separate axis from tier on purpose: it marks partners you have actually assessed, which is the claim that carries weight in regulated procurement. Only set it where you can defend it. Logo tiles fall back to logoText or the first two letters of the name, so the directory works before anyone has sent you an SVG — the same reasoning as the initials avatars in Team Grid.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.