Component

Brand Network Cell

A cross-product network card for surfacing related products or sister brands. Displays a glyph monogram with caller-provided brand tints, a domain name, a "You are here" badge when active, body copy, and an optional visit link.

Current cell

Set current to mark the active product. A primary ring and "You are here" badge are added automatically.

glassa.aiYou are here

The AI-powered glass design studio for modern teams.

Visit →

Neighbour cell

A non-current neighbour in the network — no ring, no badge. Pass href to render a visit link, and optionally linkLabel to customise its text.

refraction.dev

Open-source UI components for the modern web.

Explore →

Pair side-by-side

Typical usage: a two-column grid with the current product on the left and one or more neighbours on the right.

glassa.aiYou are here

The AI-powered glass design studio for modern teams.

Visit →

refraction.dev

Open-source UI components for the modern web.

Explore →

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { BrandNetworkCell } from '@refraction-ui/react'

export function MyPage() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <BrandNetworkCell
        glyph="G"
        glyphBg="#6366f1"
        glyphColor="#ffffff"
        domain="glassa.ai"
        body="The AI-powered glass design studio for modern teams."
        href="https://glassa.ai"
        current
      />
      <BrandNetworkCell
        glyph="R"
        glyphBg="#f59e0b"
        glyphColor="#ffffff"
        domain="refraction.dev"
        body="Open-source UI components for the modern web."
        href="https://refraction.dev"
        linkLabel="Explore →"
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
`glyph`	`string`	--	Single character or short string used as the brand monogram.
`glyphBg`	`string`	--	CSS colour value for the glyph box background (brand tint). Applied via inline style.
`glyphColor`	`string`	--	CSS colour value for the glyph text (brand tint). Applied via inline style.
`domain`	`string`	--	Primary identifier shown below the glyph (product domain or name).
`body`	`string`	--	Supporting description text.
`href`	`string`	--	When provided, renders a link at the bottom of the card.
`linkLabel`	`string`	`"Visit →"`	Label for the optional link.
`current`	`boolean`	`false`	Marks this cell as the active product in the network. Adds a primary ring and a "You are here" badge.
`className`	`string`	--	Additional CSS classes to apply to the card.