# Gateway Endpoint Illustration
> SVG illustration for React and shadcn/ui showing one API endpoint fanning out to four AI model providers, with color props.
Source: https://www.cult-ui.com/docs/components/gateway-endpoint-illustration
## Example
```tsx title="gateway-endpoint-illustration-demo.tsx"
"use client"
import { GatewayEndpoint } from "@/components/ui/gateway-endpoint-illustration"
function GatewayEndpointIllustrationDemo() {
return (
)
}
export default GatewayEndpointIllustrationDemo
```
Gateway Endpoint Illustration is a composable SVG illustration for React and shadcn/ui. Use it to explain a single API endpoint fronting multiple AI providers on landing pages.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/gateway-endpoint-illustration
```
### Manual
**Copy and paste the following code into your project.**
```tsx title="gateway-endpoint-illustration.tsx"
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
type GatewayEndpointIds = {
clip: string
circle1: string
circle2: string
circle3: string
inputLine: string
}
export interface GatewayEndpointProps
extends Omit, "width" | "height"> {
width?: number
height?: number
backgroundColor?: string
circleStrokeColor?: string
centerCircleStroke?: string
logoColor?: string
iconColor?: string
inputLineColor?: string
topLeftLineColor?: string
bottomLeftLineColor?: string
topRightLineColor?: string
bottomRightLineColor?: string
iconBoxFill?: string
iconBoxStroke?: string
showRadialCircles?: boolean
topLeftIcon?: React.ReactNode
topRightIcon?: React.ReactNode
bottomLeftIcon?: React.ReactNode
bottomRightIcon?: React.ReactNode
}
function buildGatewayEndpointIds(id: string): GatewayEndpointIds {
const base = id.replaceAll(":", "")
return {
clip: `${base}-clip`,
circle1: `${base}-circle1`,
circle2: `${base}-circle2`,
circle3: `${base}-circle3`,
inputLine: `${base}-input-line`,
}
}
function GatewayEndpointSvg({
className,
width = 264,
height = 120,
...props
}: React.ComponentProps<"svg">) {
return (
)
}
function GatewayEndpointDefs({
ids,
circleStrokeColor,
backgroundColor,
inputLineColor,
}: {
ids: GatewayEndpointIds
circleStrokeColor: string
backgroundColor: string
inputLineColor: string
}) {
return (
)
}
function GatewayEndpointScene({
ids,
children,
}: React.PropsWithChildren<{ ids: GatewayEndpointIds }>) {
return (
{children}
)
}
function GatewayEndpointBackground({
backgroundColor,
}: {
backgroundColor: string
}) {
return (
)
}
function GatewayEndpointRadialCircles({ ids }: { ids: GatewayEndpointIds }) {
return (
)
}
function GatewayEndpointInputLine({ ids }: { ids: GatewayEndpointIds }) {
return (
)
}
function GatewayEndpointConnectionLines({
topLeftLineColor,
bottomLeftLineColor,
topRightLineColor,
bottomRightLineColor,
}: {
topLeftLineColor: string
bottomLeftLineColor: string
topRightLineColor: string
bottomRightLineColor: string
}) {
return (
)
}
function GatewayEndpointCenter({
logoColor,
centerCircleStroke,
}: {
logoColor: string
centerCircleStroke: string
}) {
return (
)
}
function GatewayEndpointIconBubble({
x,
y,
fill,
stroke,
children,
}: {
x: number
y: number
fill: string
stroke: string
children: React.ReactNode
}) {
return (
{children}
)
}
function GatewayEndpoint({
width = 264,
height = 120,
// backgroundColor = "#FAFAFA",
backgroundColor = "transparent",
circleStrokeColor = "#EAEAEA",
centerCircleStroke = "#C9C9C9",
logoColor = "black",
iconColor = "#171717",
inputLineColor = "#C9C9C9",
topLeftLineColor = "#0067D6",
bottomLeftLineColor = "#067A6F",
topRightLineColor = "#CA2A30",
bottomRightLineColor = "#FFB224",
iconBoxFill = "white",
iconBoxStroke = "#EAEAEA",
showRadialCircles = true,
topLeftIcon,
topRightIcon,
bottomLeftIcon,
bottomRightIcon,
className,
...props
}: GatewayEndpointProps) {
const ids = buildGatewayEndpointIds(React.useId())
return (
{showRadialCircles ? : null}
{topLeftIcon ?? }
{topRightIcon ?? }
{bottomRightIcon ?? }
{bottomLeftIcon ?? }
)
}
function OpenAIIcon({ color = "#171717" }: { color?: string }) {
return (
)
}
function AnthropicIcon({ color = "#171717" }: { color?: string }) {
return (
)
}
function XAIIcon({ color = "#171717" }: { color?: string }) {
return (
)
}
function MoreIcon({ color = "#171717" }: { color?: string }) {
return (
)
}
function VercelLogo({ color = "black" }: { color?: string }) {
return (
)
}
export {
GatewayEndpoint,
GatewayEndpointSvg,
GatewayEndpointDefs,
GatewayEndpointScene,
GatewayEndpointBackground,
GatewayEndpointRadialCircles,
GatewayEndpointInputLine,
GatewayEndpointConnectionLines,
GatewayEndpointCenter,
GatewayEndpointIconBubble,
OpenAIIcon,
AnthropicIcon,
XAIIcon,
MoreIcon,
VercelLogo,
}
```
**Update the import paths to match your project setup.**