# Illustration Fluid Rendering
> SVG illustration for React and shadcn/ui connecting a browser to commerce and CMS platforms, for headless rendering features.
Source: https://www.cult-ui.com/docs/components/illustration-fluid-rendering
## Example
```tsx title="illustration-fluid-rendering-demo.tsx"
"use client"
import { FluidRendering } from "@/components/ui/illustration-fluid-rendering"
function IllustrationFluidRenderingDemo() {
return (
)
}
export default IllustrationFluidRenderingDemo
```
Illustration Fluid Rendering is a React SVG illustration for shadcn/ui with themeable colors and swappable icons. Use it in landing page sections about headless commerce or content rendering.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/illustration-fluid-rendering
```
### Manual
**Copy and paste the following code into your project.**
```tsx title="illustration-fluid-rendering.tsx"
"use client"
import type * as React from "react"
import type { ReactNode } from "react"
import { useId } from "react"
import { cn } from "@/lib/utils"
export interface FluidRenderingProps
extends Omit, "width" | "height"> {
width?: number
height?: number
// Colors
cardFill?: string
cardStroke?: string
browserDotColor?: string
placeholderFill?: string
placeholderStroke?: string
dashedStroke?: string
imagePlaceholderFill?: string
// Line colors
lineColorTeal?: string
lineColorBlue?: string
lineColorOrange?: string
lineColorRed?: string
// Connector
connectorFill?: string
connectorStroke?: string
connectorLineColor?: string
// Logo
logoColor?: string
// Text color for destination cards
textColor?: string
mutedTextColor?: string
// Custom icons for destination cards
topIcon?: ReactNode
upperMidIcon?: ReactNode
lowerMidIcon?: ReactNode
bottomIcon?: ReactNode
}
export function FluidRenderingShopifyIcon(props: React.ComponentProps<"path">) {
return (
)
}
export function FluidRenderingBigCommerceIcon(
props: React.ComponentProps<"path">
) {
return (
)
}
export function FluidRenderingContentfulIcon(
props: React.ComponentProps<"path">
) {
return (
)
}
export function FluidRenderingStoreIcon(props: React.ComponentProps<"path">) {
return (
)
}
export function FluidRendering({
width = 448,
height = 195,
cardFill = "var(--card)",
cardStroke = "var(--border)",
browserDotColor = "color-mix(in oklab, var(--foreground) 12%, transparent)",
placeholderFill = "var(--card)",
placeholderStroke = "var(--border)",
dashedStroke = "color-mix(in oklab, var(--muted-foreground) 35%, transparent)",
imagePlaceholderFill = "var(--muted)",
lineColorTeal = "#45DEC4",
lineColorBlue = "#52AEFF",
lineColorOrange = "#FFB224",
lineColorRed = "#E5484D",
connectorFill = "var(--card)",
connectorStroke = "var(--border)",
connectorLineColor = "color-mix(in oklab, var(--muted-foreground) 60%, transparent)",
logoColor = "var(--card-foreground)",
textColor = "var(--foreground)",
mutedTextColor = "var(--muted-foreground)",
topIcon,
upperMidIcon,
lowerMidIcon,
bottomIcon,
className,
...props
}: FluidRenderingProps) {
const idBase = useId().replaceAll(":", "")
const shadowFilterId = `${idBase}-fluid-rendering-shadow`
const imgMaskId = `${idBase}-img-mask`
return (
)
}
```
**Update the import paths to match your project setup.**