Port

empty

default

wired

received

import { Port } from "@bbox-ui/core";

export function PortDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-12 py-10">
      <Port state="empty" size="md" textLayout="bot">empty</Port>
      <Port state="default" size="md" textLayout="bot">default</Port>
      <Port state="wired" size="md" textLayout="bot">wired</Port>
      <Port state="received" size="md" textLayout="bot">received</Port>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add zacharyyamaoka/bbox-ui/port

Features

Four states — empty (hollow ring), default (filled neutral), wired (accent dot inside the ring), and received, a runtime flag that is never persisted as document state.
Six text layouts placing the slot relative to the dot, including two offset variants for a dot that hangs outside a block edge.
Three diameters and three text rungs, all measured off the source wireframe rather than chosen by eye.
Zero canvas assumptions — no pointer listeners, no self-measurement, no z-index.

Usage

import { Port } from "@/components/bbox/port";

<Port state="wired" size="md" textLayout="right">image</Port>

Examples

Text layout

Where the slot sits relative to the dot. The -offset variants push the label further out, for a dot painted on a block's boundary.

top

bot

right

left

import { Port } from "@bbox-ui/core";

export function PortLayouts() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-x-16 gap-y-10 py-10">
      <Port state="wired" textLayout="top">top</Port>
      <Port state="wired" textLayout="bot">bot</Port>
      <Port state="wired" textLayout="right">right</Port>
      <Port state="wired" textLayout="left">left</Port>
    </div>
  );
}

Diameter

sm 14

md 25

lg 36

import { Port } from "@bbox-ui/core";

export function PortSizes() {
  return (
    <div className="flex flex-wrap items-end justify-center gap-12 py-10">
      <Port state="wired" size="sm" textLayout="bot">sm 14</Port>
      <Port state="wired" size="md" textLayout="bot">md 25</Port>
      <Port state="wired" size="lg" textLayout="bot">lg 36</Port>
    </div>
  );
}

Reference

Props

Prop	Type	Default
state	`"empty" \| "default" \| "wired" \| "received"`	`"empty"`
size	`"sm" \| "md" \| "lg"`	`"md"`
textLayout	`"top" \| "bot" \| "right" \| "left" \| "right-offset" \| "left-offset"`	`"right"`
textSize	`"md" \| "lg" \| "xl"`	`"md"`