Blocks
138 composite UI patterns built from multiple components. Production-ready, domain-specific blocks that handle complex use cases like data tables, AI conversations, workflow approvals, and more.
Form Blocks
Composite form patterns combining multiple input primitives
Button Group
Group related actions together
Input Group
Input with addons or prefixes
Date Range Picker
Select date ranges
Searchable Select
Select with search filtering
Multi Select Dropdown
Multiple item selection
Sectioned Dropdown
Dropdown with grouped sections
Cascader
Multi-level cascading select
Mentions
At-mention input with suggestions
Data Display
Complex data visualization and presentation blocks
Team Card
Team member profile card
Credit Usage Card
Usage progress display
Empty State
Empty content placeholder
List Item
Flexible list row block
Key Value
Label and value display pairs
Editable Data
Inline editable data fields
Image Cards
Image-first card grid
Visual Feature Cards
Feature showcase cards
Description List
Labeled data list layout
Info List Card
Card with structured info list
Metric Card
Single metric display card
Inline Stats Banner
Horizontal stats row
PDF Viewer
Embedded PDF document viewer
Anomaly Card
Anomaly detection display
Feature Comparison
Side-by-side feature table
Comment Card
Threaded comment display
Navigation Blocks
Application navigation patterns and layouts
Vertical Sidebar
Side navigation panel
App Header
Application top bar
Horizontal Nav
Horizontal link navigation
Navigation Menu
Dropdown navigation menu
Settings Nav
Settings section navigation
Back Top
Scroll to top control
Dropdown Submenu
Nested dropdown menu
Floating Action Bar
Contextual action toolbar
Filter Panel
Collapsible filter controls
Contextual Search
AI-powered context search
Role Based Navigation
Permission-aware nav items
Page Header
Page title and breadcrumb header
Batch Actions Toolbar
Bulk selection action bar
Log Filtering Toolbar
Log search and filter bar
User Profile Dropdown
User avatar with dropdown
User Profile
Full user profile display
Footer
Site footer layout
AI Conversation
Chat and conversation UI patterns for AI applications
AI Conversation History
Message thread display
AI Prompt Input
AI message input field
AI Prompt Enhancer
AI-assisted prompt improvement
AI Follow-up Clarification
Request clarification from user
AI Attachments Input
File upload for context
AI Welcome State
AI assistant landing state
AI Structured Prompt
Scaffolded input with fields
AI Paginated Prompt
Step-by-step prompt wizard
AI Cloze Passage
Fill-in-the-blank prompts
AI Prompt Gallery
Sample prompts showcase
AI Result Preview
Live preview of generated content
AI Object Results
Hierarchical result display
AI Timeline Results
Chronological result display
Conversation Branch
Branching conversation paths
AI Right Sidebar
Collapsible AI assistant panel
AI Voice Chat
Voice-activated AI interface
AI Suggestion Panel
Contextual AI suggestions panel
Dynamic Loading Text
Context-aware AI loading messages
AI Transparency
Explainability and trust-building AI UI patterns
AI Status Indicator
Consolidated AI status display
AI Info Panel
Consolidated AI info display
AI Coauthor Badge
AI content watermark badge
AI Streaming Text
Typewriter streaming output
AI Caveat
Risk warnings and disclaimers
AI Feedback Loop
Collect user feedback on AI responses
AI Context Awareness
Show what AI knows
AI Learning Progress
Track AI personalization
AI Permission Request
Request user permissions
AI Collaborative Canvas
Human-AI co-creation
AI Voice Transcript
Voice-to-text with speakers
AI Uncertainty Highlighter
Inline low-confidence highlighting
AI Suggestion Diff
Cursor-style red/green diff view
AI Autonomy Slider
Control AI agency level
AI Prompt Quality Meter
Real-time prompt quality analysis
AI Relationship Stage
Trust progression indicator
AI Persona Selector
AI personality selection
AI Response Cards
Multiple response options carousel
AI Data Ownership
Data control and transparency
Sentiment Alert
Tone detection indicator
Reasoning Display Panel
AI chain-of-thought display
Provenance Trail
Data source lineage display
Three Level Transparency
Layered AI explainability
Counterfactual Block
What-if scenario display
Citation Accuracy
Source accuracy confidence display
Revert To AI Toggle
Restore AI recommendation toggle
AI Tools & Actions
AI interaction controls and status displays
AI Tool Call Card
Tool execution display
AI Model Selector
Model selection dropdown
AI Image Generation
Image generation display
AI Prompt Templates
Save/recall prompt library
AI Token Usage
Token budget visibility
AI Action Plan
AI step plan before executing
AI Thread Options
Thread vs fresh control
AI Connectors
External data integrations
AI Filters
Input/output constraints
AI Style Presets
Output style presets
AI Handoff Control
Human-AI control transfer
AI Error Recovery
Graceful AI failure handling
AI Memory Control
Manage AI memory & privacy
Sandbox Configurator
AI sandbox environment setup
Threshold Configurator
Confidence threshold controls
Model Registry Table
AI model catalog display
Workflow & Governance
Enterprise workflow and approval patterns
Flow Builder
Visual workflow designer
Approval Gate
Approval workflow gate
Review Queue
Review queue interface
Audit Log
Activity audit log
Policy Editor
Governance rule editor
Compliance Checklist
Compliance tracker
Audit Export
Export audit data controls
Multistage Approval Flow Builder
Multi-step approval workflow
Escalation Tree
Escalation path visualizer
Branch Comparison
Side-by-side branch diff
Risk Heatmap
Risk level heat matrix
Quality Dashboard
AI output quality metrics with rejection patterns
Approval Rate Chart
First-pass approval rate trend over time
Alert System
Centralized alert management
Exception Dashboard
Error and exception overview
Red Team Dashboard
AI red-teaming metrics
Error Fallback
Graceful error recovery UI
Calendar & Scheduling
Date and time scheduling UI blocks
Marquees & Marketing
Animated marketing and promotional blocks
Feature Cards Marquee
Scrolling feature cards
Logo Cloud Marquee
Animated logo display
Testimonial Marquee
Scrolling testimonials
Stats Marquee
Animated statistics
Interactive Marquee
Clickable marquee items
Tech Stack Marquee
Technology logos marquee
Metrics Badge Marquee
Animated metrics badges
Announcement Ticker
Scrolling announcement bar
Monitoring & Dashboards
Observability, monitoring, and dashboard layout blocks
Personalized Dashboard
User-customizable dashboard
Knowledge Graph
Entity relationship visualizer
Adaptive Content Card
Content adapts to context
Adaptive Density
UI density preference controls
MCP App View
MCP tool application view
A2UI Renderer
Agent-to-UI dynamic renderer
Pricing Table
Plan comparison pricing table