Molecules
Composite components built from atoms, specific to Imajeure's Rainbow Framework
RainbowPill
Metric pills with Lucide icons for Rainbow Framework metrics
All 7 Metrics (ROYGBIV)
Sizes
With Values
Icon Only (Compact)
import { RainbowPill } from '@/components/imajeure'RainbowPillGroup
Complete metric selector with single selection mode
Interactive Selection (click to select)
Selected: relationships
Compact Mode
import { RainbowPillGroup } from '@/components/imajeure'GlassPill
Premium 3D glass-effect pills extracted from landing page. Frosted glass with glow effects.
All 7 Metrics (Glass Effect)
Reputation
Trust & Authority
Identity
Authenticity
Presence
Visibility & Impact
Sharing
Creative Reach & Virality
Conversations
Engagement Depth
Groups
Community Building
Relationships
Revenue Predictor
Arc Layout (3-2-2)
Reputation
Trust & Authority
Identity
Authenticity
Presence
Visibility & Impact
Sharing
Creative Reach & Virality
Conversations
Engagement Depth
Groups
Community Building
Relationships
Revenue Predictor
Interactive Selection
Reputation
Trust & Authority
Identity
Authenticity
Presence
Visibility & Impact
Sharing
Creative Reach & Virality
Conversations
Engagement Depth
Groups
Community Building
Relationships
Revenue Predictor
Selected: relationships
Individual Pills
Reputation
Trust & Authority
Relationships
Revenue Predictor
import { GlassPill, GlassPillGroup } from '@/components/imajeure'MetricCard
Metric display with Lucide icon, value, trend arrow, and vibrancy bar
Metric Icons (from design-tokens)
Reputation
Identity
Presence
Sharing
Conversations
Groups
Relationships
Interactive Cards
Reputation
Trust Score
8.7K5%
75% health
Presence
Impressions
12.5K18%
85% health
Relationships
Key Connections
84712%
88% health
Click cards to toggle selection.
import { MetricCard } from '@/components/imajeure'