Component Library
Reference examples for building consistent interfaces across Zenpa. All components automatically adapt to light and dark themes.
Discussion UI
Chat Bubbles
AI Assistant Response
Found information about John Doe's deadline question:
John is asking about the Q4 project deadline. Based on your team calendar, the deadline is December 15th. I can send a Slack message to Maria (Project Manager) to confirm the timeline and update John.
General App UI
Forms & Inputs
Form Elements
Button Variants
Use for main CTAs and important actions
Use for secondary or alternative actions
Use for low-priority or cancel actions
Data Display
Table
Cards & Layouts
Basic Card
The default card component with elevation and subtle border. Use for grouping related content.
Content Card
Cards automatically adapt their background and borders to the current theme.
Interactive Card
Cards can contain any content: text, buttons, forms, or other components.
Source Components
Source Item
Display source information with icon, domain, and title. Perfect for notifications, feeds, or content attribution.
Multiple Sources in a Row (with text truncation)
<div class="source">
<div class="source-icon">
<div class="icon-placeholder">G</div>
</div>
<div class="source-content">
<div class="source-domain">mail.google.com</div>
<div class="source-title">FW: Attached Image</div>
</div>
<div class="source-action">...</div>
</div>
Connect Components
Service Connection
Connect to external services and integrations. Perfect for onboarding flows, service discovery, and integration management.
<div class="connect-context">Searching your email</div>
<div class="connect">
<div class="connect-content">
<div class="connect-icon">
<div class="icon-placeholder">G</div>
<div class="icon-overlay">📅</div>
</div>
<div class="connect-text">
<div class="connect-title">Connect your Gmail and Google Calendar</div>
<div class="connect-description">Get answers to your emails and calendar events</div>
</div>
<div class="connect-actions">
<button class="connect-skip">Skip</button>
<button class="connect-button">Connect</button>
</div>
</div>
</div>
Layout Grids
Responsive Grid System
Use .grid.two, .grid.three, or .grid.four for automatic responsive layouts.
<div class="grid three">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
AI Effects
Special components that showcase AI functionality with subtle animations and visual effects.
AI Glow Button
Wrap any element with .ai-glow to add the ambient halo.
Action Buttons
Action buttons for commands with keyboard shortcuts. Use .btn.action for standard actions and .btn.action.keep for positive actions.
AI Generated Card
This card uses an internal AI glow that subtly moves over time, ideal for assistant responses or generated content.
AI Link Text
Click the shimmering AI‑enhanced link for context‑aware help.
The gradient animation suggests dynamic, intelligent content.
AI Thinking Component
Clean, minimalist thinking indicator with subtle glow effects and animated content that appears gradually.
<div class="thinking with-glow">
<div class="thinking-header">
<div class="thinking-icon"></div>
<span class="thinking-text">Thinking</span>
<div class="thinking-dots">
<div class="thinking-dot"></div>
<div class="thinking-dot"></div>
<div class="thinking-dot"></div>
</div>
</div>
<div class="thinking-content visible">
Your thinking content here...
</div>
</div>
Color Schemes
Dropdown Component
Clean, modern dropdown with subtle shadows and smooth animations, perfect for model selection or any choice-based interface.
Dropdown Component Documentation
Complete reference for all dropdown component parameters, classes, and variations.
Show detailed documentationMarketing
Components designed for marketing materials, landing pages, and promotional content.
Hero Section
Your AI-powered workspace
Calm, focused, and beautifully organized
Feature Cards
Smart Organization
AI automatically categorizes and prioritizes your tasks
Seamless Integration
Works with your existing tools and workflows
Call-to-Action Buttons
Marketing CTAs use larger padding and font sizes for better visibility and impact.