Component Playground
Interactive UI components for sukiOS design system
Button
All Variants
Badge
Status Badge
All Variants
DefaultSuccessWarningErrorInfo
Card
Card Title
TagThis is a card component with optional hover effects.
XP Bar
5
XP350 / 500
Progress Ring
75%
All Variants
75%
60%
45%
30%
Star Rating
Examples
Design Tokens
Components use these design tokens from the sukiOS design system:
suki-primary
#7C3AED
suki-success
#10B981
suki-error
#EF4444
suki-warning
#F59E0B
Planned Components
Coming SoonQuestionBubble
Quiz question speech bubble
AnswerOption
Multiple choice answer button
RewardCard
Achievement/reward display card
Import & Usage
// Import UI components
import { Button, Badge, Card } from '@/components/ui';
// Import game components
import { XPBar, ProgressRing, StarRating } from '@/components/game';
// Examples
<XPBar current={350} max={500} level={5} />
<ProgressRing value={75} variant="success" label="Complete" />
<StarRating rating={4.5} size="lg" />