Claude Clone

Live Demo

Overview

The Claude Clone example demonstrates how to customize assistant-ui to match Anthropic's Claude interface. This includes the characteristic orange color scheme, clean typography, and minimalist design that users associate with Claude.

Features

• Claude Styling: Authentic orange color scheme and visual design
• Clean Typography: Claude's distinctive font choices and text styling
• Minimalist Layout: Clean, uncluttered interface design
• Message Formatting: Proper message styling with Claude's visual patterns
• Responsive Design: Mobile-optimized layout
• Accessibility: High contrast and accessible design patterns

Usage

To create a Claude-style interface:

1. Color Scheme: Apply Claude's orange (#ff6900) and neutral color palette
2. Typography: Use clean, readable fonts with proper hierarchy
3. Layout Design: Implement Claude's minimalist, content-focused layout
4. Component Styling: Customize all UI elements to match Claude's aesthetic

Code

Key styling elements for Claude clone:

• Primary Color: Claude's signature orange for interactive elements
• Typography: Clean, readable fonts with proper line spacing
• Spacing: Generous whitespace and clean margins
• Borders: Subtle borders and dividers
• Shadows: Minimal, subtle shadow effects

The implementation focuses on clean, accessible design while maintaining all assistant-ui functionality.