Grok Clone

Live Demo

Overview

The Grok Clone example demonstrates how to customize assistant-ui to match xAI's Grok interface. This includes the characteristic light/dark theme support and minimalist design.

Features

• Grok Styling: Authentic Grok look with light and dark theme support
• Theme Support: Light (#FDFDFD) and dark (#141414) backgrounds
• Message Formatting: Clean message layout with proper spacing
• Input Design: Grok-style rounded input field with animated send button
• Empty State: Welcome screen with Grok logo
• Action Buttons: Edit, Copy, Regenerate, and Feedback actions

Usage

To create a Grok-style interface:

1. Color Scheme: Apply Grok's background colors (#FDFDFD light / #141414 dark)
2. Typography: Use clean, sans-serif fonts with proper hierarchy
3. Layout Design: Implement Grok's minimalist layout with smooth animations
4. Component Styling: Customize all UI elements to match Grok's aesthetic

Code

Key styling elements for Grok clone:

• Primary Background: #FDFDFD (light) / #141414 (dark) for the main container
• Input Background: #F8F8F8 (light) / #212121 (dark) for the composer area
• Text Colors: #0d0d0d (light) / #e5e5e5 (dark) for content
• Borders: Subtle borders (#e5e5e5 light / #2a2a2a dark) for separation
• Animations: Smooth transitions for button states and model selector

The implementation focuses on the clean, modern aesthetic while maintaining all assistant-ui functionality.