Primitive 12 / Foreign key arrow

Foreign key arrow

A standalone foreign-key visualizer. Source and target endpoints are rendered as bordered tiles with the qualified column name. A dashed teal arrow joins them through a connector slot that also carries the constraint name and the on-delete / on-update action chips.

Production answer

Foreign key arrow is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Foreign key arrow states
Generative search brief

Foreign key arrow: A standalone foreign-key visualizer. Source and target endpoints are rendered as bordered tiles with the qualified column name. A dashed teal arrow joins them through a connector slot that also carries the constraint name and the on-delete / on-update action chips.

Live primitive — bookings → quotes
Sourcebookings.quote_id
bookings_quote_id_fkey
on deleteSet nullon updateCascade
Targetquotes.id
Live primitive — quotes → customers
Sourcequotes.customer_id
quotes_customer_id_fkey
on deleteRestricton updateCascade
Targetcustomers.id
Live primitive — invoices → bookings
Sourceinvoices.booking_id
invoices_booking_id_fkey
on deleteRestricton updateCascade
Targetbookings.id