Mercy-UI Playground

60 components with MCP tool signatures

Showing 60 of 60 components

MercyProbabilityGauge

ai
Risk Score
0
High Confidence

MercyDataShard

ai

Data Insight

AI-detected anomaly in transaction pattern

MercyConfidenceMeter

ai
Model Confidence85%
Low
Med
High

MercyEvidenceCloud

ai

MercyModelContextDisplay

ai

Preview not available

MercyLineChart

charts
900780660540420300JanFebMarAprMayJun

MercyBarChart

charts
8006004002000Q1400Q2300Q3600Q4800

MercyPieChart

charts
35%25%40%
Sales
Marketing
Engineering

MercyAreaChart

charts
800700600500400300JanFebMarApr

MercyScatterChart

charts
80655035201030507090

MercyRadarChart

charts
1836547290SpeedPowerDefenseAccuracyStamina

MercyGaugeChart

charts
750100Progress

MercyHeatMap

charts
MorningAfternoo...EveningMonTue
40
80

MercyCandlestickChart

charts
145.00132.50120.00107.5095.00MonTueWedThuFri

MercySankeyChart

charts
Source ASource ASource BSource BTarget CTarget CTarget DTarget D

MercyNetworkGraph

charts
Node 1Node 2Node 3Node 4Node 5

MercyFunnelChart

charts
Visitors10,000 - 100.0%Leads5,000 - 50.0%Qualified2,500 - 25.0%Proposal1,000 - 10.0%Closed250 - 2.5%

MercyGanttChart

charts
Day 0Day 2Day 3Day 5Day 7Day 8Day 10PlanningDevelopment75%Testing50%Deployment25%

MercyTreeMap

charts
Technology100Hardware40Software60Finance80Healthcare60

MercySparkles

cinematic
Sparkle effect

MercyMeteors

cinematic
Meteor effect

MercySpotlight

cinematic

Hover to see spotlight

MercyVortex

cinematic

MercyAurora

cinematic

MercyParticles

cinematic

MercyBackgroundGlow

cinematic
Glow effect

MercyTracingBeam

cinematic

Content with tracing beam effect

MercyCard3D

cards

3D Tilt Card

Hover to see 3D tilt

MercyCardHover

cards

Hover Card

Hover to see lift effect

MercyCardSpotlight

cards

Spotlight Card

Move mouse for spotlight

MercyCardStack

cards

Card 1

First card

Card 2

Second card

Card 3

Third card

1 / 3

MercyEvervaultCard

cards

Encrypted Card

Hover for encryption

MercyTypewriter

text

MercyTextGenerate

text
Beautifulanimatedtextreveal

MercyTextReveal

text
PPrrooggrreessssiivvee tteexxtt rreevveeaall

MercyFlipWords

text
Active

MercyStreamingText

text

MercyEncryptedText

text
PJsZeYJ=%;?

MercyAnimatedCounter

data
0

MercyDiffViewer

data
-2+35 lines
1-const x = 1
1+const x = 2
2-const y = 2
2+const y = 3
3+const z = 4

MercyTimeline

data

Started

Project started

Jan 15

Development

Main implementation

Feb 1

Launch

Production deployment

Mar 28

MercyAIThinkingIndicator

ai
Thinking
...

MercyAIThinkingBubbles

ai
Processing your request...

MercyCommandPalette

ai

MercyChatBubble

ai

Show me analytics

AI

Here are your analytics.

MercyMarkdownReveal

ai

AI Response

Here's a *formatted* response with:

  • List item one
  • List item two
  • A blockquote
    const x = 1

    MercyCodeBlock

    ai
    typescript
    1function greet(name: string): string {
    2 return `Hello, ${name}!`
    3}

    MercyNotificationStack

    ui

    MercyButton

    ui

    MercyProgressStepper

    ui

    Account

    Profile

    3

    Settings

    4

    Complete

    MercySkeletonLoader

    ui

    MercySkeletonText

    ui

    MercySkeletonCard

    ui

    MercySoundWave

    ui

    MercyAudioVisualizer

    ui

    MercyVoiceIndicator

    ui

    MercyAvatarStack

    ui
    AC
    BS
    CW
    +1

    MercyAvatar

    ui
    AC

    MercyMorphingIcon

    ui

    MercyRouteTransition

    ui

    Route transition demo