AI Elements

AI Elements is a collection of pre-built, composable React components designed for building AI-native user interfaces. Built on shadcn/ui conventions, they integrate seamlessly with your existing component library.

What are AI Elements?

AI Elements provides the building blocks for chat interfaces, streaming content displays, and AI-powered code editors. Each component is fully customisable via props and Tailwind CSS, and follows the shadcn/ui pattern of copying components into your project for full ownership.

shadcn/ui compatible

AI Elements follow the same copy-and-own philosophy as shadcn/ui. Components are added directly to your project, giving you full control over the source code.

Installation

Install AI Elements using the CLI:

bash
bunx ai-elements@latest

Or add individual components:

bash
bunx ai-elements@latest add conversation message prompt-input code-block

Available components

Conversation

A complete chat interface with message history, scroll management, and typing indicators.

Learn more

Code Block

AI-optimised code display with syntax highlighting, copy support, and streaming-aware rendering.

Learn more

Streaming

Utilities and components for rendering streaming AI responses with smooth transitions.

Learn more

Design principles

  • Composable — Each component works independently or can be composed together for complex interfaces
  • Accessible — Full ARIA support, keyboard navigation, and screen reader announcements
  • Themeable — Inherits your design tokens and supports both light and dark modes
  • Streaming-first — Designed for real-time AI responses with graceful handling of incomplete content
  • TypeScript-native — Full type definitions with strict typing for all props and events