Add2 Components Showcase

42 Components

All components from the component library - AI, Adaptive, Calendar, Dropdowns, and Marquees

Marquee & Ticker Components

Infinite scrolling components for showcasing content

Metrics Badge Marquee

Scrolling badge ticker with 10 color variants

BERTScore
String Equality
SacreBLEU
METEOR
ROUGE Score
F1 Score
Precision
Recall
Perplexity
BLEU Score
BERTScore
String Equality
SacreBLEU
METEOR
ROUGE Score
F1 Score
Precision
Recall
Perplexity
BLEU Score

Tech Stack Marquee

Dual row marquee scrolling in opposite directions

Component preview - check individual page for full implementation

AI Interface Components

14 components for AI-powered interfaces

AI Prompt Input

Multi-line input with attachments and voice

Advanced prompt input with file attachments, voice recording, and AI model selector

AI Chat Message

Message bubbles with actions

Chat messages with copy, regenerate, and feedback buttons

AI Thinking Indicator

Loading states with animation

AI is thinking...

AI Suggestion Chips

Quick reply suggestions

Calendar & Scheduling

6 components for calendar and agenda views

Mini Calendar Picker

Compact date picker

Day Agenda View

Timeline view with events

Week Agenda View

Weekly schedule overview

Dropdowns & Context Menus

8 advanced dropdown and menu components

Sectioned Dropdown

Grouped menu items with headers

Dropdown with section headers and dividers

Command Palette

Quick search with keyboard navigation

⌘K style command palette

AI-Adaptive Components

6 components that adapt based on user behavior

Adaptive Density Controller

AI-learned layout spacing

Automatically adjusts UI density based on preferences

Personalized Dashboard

Role-based widget layouts

Dashboard that adapts to user's role and usage patterns

Component Library Summary

14
AI Components
6
AI-Adaptive
6
Calendar
8
Dropdowns
8
Marquees

Note

This is a comprehensive showcase of all components from the component library. Each component has its own dedicated documentation page with detailed examples, props, and usage instructions. Visit individual component pages from the navigation sidebar for full interactive demos.