Shadcn Icon

AI components

UI for common ai interfaces

Chat, tool-result, image, map, form, and onboarding UIs for AI products. Install with the shadcn CLI.

Install with shadcn

Copy into your project

$ npx shadcn@latest add openai-chat-image

AI chat and tool-result components

AI chat and tool results

Claude composer input

Loading preview…

Claude composer input

Claude-style landing composer: rounded prompt surface, model menu with extended thinking, attachment trigger, voice control, and category chips.

AI chat and tool results

OpenAI image chat

Loading preview…

OpenAI image chat

OpenAI-style image composer: image vs. ask-anything modes, idea carousel, and attachment thumbnails for chat and tool UIs.

AI chat and tool results

OpenAI image loader

Loading preview…

OpenAI image loader

WebGL pixel-mosaic image generation loader with cycling status labels — monolith and compound APIs for AI SDK image flows.

AI chat and tool results

Claude map itinerary

Loading preview…

Claude map itinerary

Multi-day Leaflet itinerary with days, photos, and routing-style layout for trip planning tool output.

AI chat and tool results

Claude recipe tool

Loading preview…

Claude recipe tool

Rich recipe UI for AI chat: image carousel, servings scale, print, copy, inline timers, and unit conversion — styled for tool-rendered content.

AI chat and tool results

Claude text message tool

Loading preview…

Claude text message tool

Multi-variant SMS drafts with edit, copy, reset, and optional Open in Messages — for text message tool payloads.

AI chat and tool results

Claude email tool

Loading preview…

Claude email tool

Email draft UI with subject/body variants, Gmail and mailto actions, copy and reset — styled for email tool output.

AI chat and tool results

Claude image search tool

Loading preview…

Claude image search tool

Web image search results as a collage grid with lightbox carousel, domain badges, and favicons — for image_search-style tool output.

AI chat and tool results

OpenAI What's New dialog

Loading preview…

OpenAI What's New dialog

Multi-step onboarding-style dialog with hero imagery, captions, and next/finish flow — inspired by product update modals.

AI chat and tool results

Cursor-style questions panel

Loading preview…

Cursor-style questions panel

Multi-question wizard with single- and multi-select, keyboard-friendly navigation, and optional other text — for in-app intake flows.

AI product marketing components

AI product marketing

Code Block 1

Loading preview…

Code Block 1

Feature section with animated code block and syntax highlighting

AI product marketing

Code Block 2

Loading preview…

Code Block 2

Feature section with animated code block and syntax highlighting

AI product marketing

Code Block 3

Loading preview…

Code Block 3

Feature section with animated code block and syntax highlighting

AI product marketing

Feature Grid 1

Loading preview…

Feature Grid 1

Feature grid showcasing AI marketing agents with tilted card previews and hover effects. Perfect for highlighting product capabilities and use cases.

AI product marketing

Bento Layout 1

Loading preview…

Bento Layout 1

Animated bento grid for presenting install methods, integrations, and product features.

AI product marketing

Model Comparison

Loading preview…

Model Comparison

Compare AI models like GPT-4, Claude, and Gemini. Includes filtering, sorting, performance metrics, and pricing data.

AI product marketing

Model Comparison Compact

Loading preview…

Model Comparison Compact

Compare AI models in a compact table format. Includes horizontal scrolling, sortable columns, and condensed data for quick evaluation.

AI product marketing

Model Comparison Hover

Loading preview…

Model Comparison Hover

Compare AI models with hover details for GPT-4, Claude, and Gemini. Includes filtering, sorting, and performance metrics.

AI product marketing

Comparison Table 1

Loading preview…

Comparison Table 1

Sortable AI model table with pricing, performance, and capability columns for side-by-side evaluation.

AI product marketing

Integration Showcase 1

Loading preview…

Integration Showcase 1

Integration cards with connection status, configuration controls, and connectivity testing.

AI product marketing

AI Integrations Circle

Loading preview…

AI Integrations Circle

Circular fan-out layout showcasing AI integrations with radiating connection lines. Features interactive hover effects, tooltips, and dynamic positioning for visual integration highlights.

AI product marketing

Agent ROI Calculator

Loading preview…

Agent ROI Calculator

Interactive agent ROI calculator with labeled inputs, live savings, and mobile-friendly cost comparison.

Lifetime license

Ship polished AI UI faster