Components
56 components across 9 categories. Built with Tailwind CSS for consistency and flexibility.
Actions
Interactive button and link components
AI
AI chat and assistant interface components
Typing Indicator
Animated indicator showing the AI assistant is generating a response.
File Attachment
Display attached files with preview, upload progress, and status indicators.
AI Code Block
Syntax-highlighted code block optimized for AI chat with copy button, language indicator, and streaming support.
Message Actions
Action buttons for chat messages including copy, regenerate, edit, and feedback.
Chat Message
Individual message bubble for AI chat interfaces with support for user and assistant roles.
Message Input
Compose and send messages with auto-resizing textarea, attachments, and send button.
Conversation List
Sidebar list of conversation threads with active state, previews, and timestamps.
Artifact Panel
Side panel for viewing and interacting with AI-generated artifacts like code, documents, and previews.
Model Selector
Dropdown to switch between AI models with capability indicators.
Token Counter
Display token usage and remaining capacity with visual progress indicator.
Regenerate Button
Button to retry generating an AI response with loading state.
Stop Generation
Button to halt AI response generation mid-stream.
Streaming Cursor
Animated cursor indicator showing AI is actively writing text.
Suggested Prompts
Starter questions and prompt chips to help users begin conversations.
Citation Card
Display sources and references cited by the AI in responses.
AI Error State
Error displays for rate limits, API errors, and content warnings.
System Prompt Editor
Editor to customize AI behavior and instructions.
Temperature Slider
Slider to adjust AI creativity and randomness settings.
Context Indicator
Shows what files, documents, or context the AI is currently using.
Voice Input Button
Button to trigger speech-to-text input for hands-free messaging.
Image Upload Zone
Multi-modal input area for uploading images to AI conversations.
Export Share Menu
Menu for exporting and sharing conversation content.
Conversation Search
Search bar to find messages within conversation history.
Base
Foundational design tokens and styles
Data Display
Components for displaying information
Table
Data table for displaying structured information.
Badge
Small status indicator with semantic colors.
Avatar
User avatar with image, initials, or icon fallback.
Card
Versatile container for grouping related content.
EmptyState
Placeholder for empty or missing content.
CodeBlock
Syntax-highlighted code display with copy button.
Feedback
User feedback and notification components
Forms
Form inputs and controls
Input
Clean text input with focus ring and error states.
Textarea
Multi-line text input for longer content.
Select
Dropdown select input for choosing from options.
Checkbox
Checkbox input for boolean or multiple selections.
Radio
Radio button for single selection from multiple options.
Toggle
Accessible toggle switch for boolean settings.
FormGroup
Container for form fields with label and helper text.
FileUpload
File upload input with drag and drop support.
Layout
Layout and structure components
Navigation
Navigation and wayfinding components
Overlays
Modal, dialog, and overlay components