Illustration Graph
SVG line graph illustration for React and shadcn/ui with data points, axis labels, and a highlighted error region.
Updated
Illustration Graph is a React SVG chart illustration for shadcn/ui. Use it in landing page sections for monitoring, observability, or analytics products.
Installation
pnpm dlx shadcn@latest add @cult-ui/illustration-graph
Props
| Prop | Type | Description |
|---|---|---|
| width | number | SVG width |
| height | number | SVG height |
| backgroundColor | string | Background color |
| borderColor | string | Border color |
| cardFill | string | Card fill color |
| cardStroke | string | Card stroke color |
| gridLineColor | string | Grid line color |
| primaryLineColor | string | Primary line color |
| errorLineColor | string | Error line color |
| errorBadgeColor | string | Error badge background color |
| errorBadgeTextColor | string | Error badge text color |
| highlightAreaColor | string | Highlight area fill color |
| highlightBorderColor | string | Highlight area border color |
| textColor | string | Text color |
| mutedTextColor | string | Muted text color |
| badgeText | string | Badge label text |
| headerText | string | Header text |
| footerText | string | Footer text |
| yAxisLabels | string[] | Y-axis label strings |
| dataPoints | DataPoint[] | Chart data points (x, y) |
| errorRegion | { start: number; end: number } | Optional error region range |
| showHighlightArea | boolean | Whether to show the highlight area |
| customBadgeIcon | ReactNode | Custom icon for the badge |