Kaption Style Guide
WhatsApp Layout Demo
The KaptionActionPill floating at the bottom of the conversation list, exactly like in the real extension. Notice the precise positioning and blur effect matching the extension's implementation.
Alice Johnson
online
Hey! Did you see the new Kaption features?
10:30 AM
Yes! The transcription feature is amazing
10:31 AM
What about scheduled messages?
10:32 AM
You can schedule messages for any time!
10:33 AM
Platform Layout Demo (Filters at Bottom)
Default variant with filters at the bottom. Good for mobile-first interfaces.
Messages
Recent
Product Team
5 members
Emily
New feature spec is ready for review
10:30 AM
Great! I'll take a look this afternoon
10:31 AM
Marcus
Added some notes on the API section
10:35 AM
Platform Layout Demo (Top Bar)
Top bar variant with filters integrated at the top. Better for desktop workflows.
Messages
Product Team
5 members
Emily
New feature spec is ready for review
10:30 AM
Great! I'll take a look this afternoon
10:31 AM
Marcus
Added some notes on the API section
10:35 AM
PlatformActionTopbar (Standalone Component)
Extracted standalone component from PlatformActionPill top-bar variant. Same functionality, simplified API.
Messages
Product Team
5 members
Emily
New feature spec is ready for review
10:30 AM
Great! I'll take a look this afternoon
10:31 AM
Marcus
Added some notes on the API section
10:35 AM
Filter Icons
Icon proposals for conversation status filters: Open, Resolved, Snoozed, and All.
Open
Resolved
Snoozed
All
GlassDialog
A beautiful dialog component with glassmorphism styling. Supports dark/light mode, multiple button variants, and locked state for non-dismissible dialogs.
Button Variants
KaptionActionPill
A floating action pill with glassmorphism styling. Features collapsed/expanded/settings states, smooth animations, tooltips, and auto-collapse behavior.
Collapsed State (click to expand)
Expanded State
Settings State
Dark vs Light Mode Comparison
Usage Examples
import { GlassDialog, GlassDialogTrigger, GlassDialogContent,
GlassDialogHeader, GlassDialogTitle, GlassDialogDescription,
GlassDialogFooter, GlassDialogButton } from '@/components/ui/GlassDialog'
<GlassDialog isDarkMode={true}>
<GlassDialogTrigger asChild>
<button>Open Dialog</button>
</GlassDialogTrigger>
<GlassDialogContent>
<GlassDialogHeader>
<GlassDialogTitle>Title</GlassDialogTitle>
<GlassDialogDescription>Description</GlassDialogDescription>
</GlassDialogHeader>
<GlassDialogFooter>
<GlassDialogButton variant="secondary">Cancel</GlassDialogButton>
<GlassDialogButton variant="primary">Confirm</GlassDialogButton>
</GlassDialogFooter>
</GlassDialogContent>
</GlassDialog>import { KaptionActionPill } from '@/components/ui/KaptionActionPill'
<KaptionActionPill
isDarkMode={true}
showPrivacy={true}
privacyEnabled={privacyEnabled}
onPrivacyToggle={setPrivacyEnabled}
showReminders={true}
reminderCount={3}
showScheduledMessages={true}
scheduledCount={2}
isPaidPlan={false}
planName="FREE"
/>