UI Component Styleguide
Complete reference for all available UI components
Color Palette
Warm Sand
#EED9C4
Dusty Rose
#E2AFA2
Terracotta
#C36A4D
Cream White
#FCF9F6
Deep Brown
#3B2F2F
Olive Green
#76C043
Golden Tan
#FFB84D
Slate Blue
#4A90E2
Navigation Components
Default Variant
Colored Variant (Terracotta)
Without Icons
Features:
- • Responsive mobile menu with hamburger icon
- • Three variants: default, transparent, and colored
- • Position options: static, sticky, or fixed
- • Optional brand logo and icons
- • Uses color scheme (terracotta, warmSand, deepBrown)
Buttons
Variants
Color Scheme Examples
Sizes
States
Form Components
This is a helper text
This field is required
Maximum 500 characters
Choose one option
Advanced dropdown with icons
You must accept to continue
Card Components
Warm Sand Card
Card with warmSand background color.
Dusty Rose Card
Card with dustyRose background.
Olive Green Card
Card with oliveGreen background.
Alert Components
Information
This is an informational alert message.
Success
Your action was completed successfully!
Warning
Please review your input before continuing.
Error
Something went wrong. Please try again.
Modal Component
Features:
- • Keyboard escape to close
- • Click backdrop to close
- • Multiple sizes available
- • Accessible focus management
- • Body scroll lock when open
Connections List Component
Sample Connections
Maria Schmidt
Companion • Connected 2 weeks ago
maria.schmidt@email.com
Hans Mueller
Learner • Connected 1 month ago
hans.mueller@email.com
Anna Weber
Companion • Connected 3 days ago
anna.weber@email.com
Empty State
No Connections Yet
You haven't connected with anyone yet. Send an invitation to start building your network.
Loading State
Features:
- • Display connected users with avatars and details
- • Role-based color coding (Learner/Companion)
- • Connection date and status information
- • Action buttons for messaging and removing connections
- • Empty state with call-to-action
- • Loading state with skeleton animations
- • Responsive layout for different screen sizes
Action Card Component
Variants
Default Action
This is a default action card with warm sand background and terracotta button.
Dangerous Action
This is a danger variant for destructive actions like deleting data.
Success Action
This is a success variant for positive, confirming actions.
Information Action
This is an info variant for informational or neutral actions.
Disabled State
Disabled Action
This action card is disabled and cannot be clicked.
Disabled Danger
This danger action card is also disabled.
Common Use Cases
Enable Feature
Turn on two-factor authentication for enhanced security.
Export Data
Download your account data in JSON format.
Upgrade Plan
Unlock premium features with a paid subscription.
Reset Settings
Reset all preferences to their default values.
Features:
- • Four variants: default, danger, success, and info
- • Consistent card styling with appropriate color schemes
- • Disabled state support with visual feedback
- • Hover effects and smooth transitions
- • TypeScript support with proper prop validation
- • Accessible button states and focus management
- • Flexible onClick handler for any action
Usage Example
import { ActionCard } from '@/components/common/ui/ActionCard';
<ActionCard
title="Enable Feature"
description="Add this functionality to your account"
buttonText="Enable"
onClick={handleEnable}
variant="success"
disabled={false}
/>Usage Guidelines
Import Components
import { Button } from '@/components/common/ui/Button';
import { Card, CardHeader } from '@/components/common/ui/Card';
import { Input, Select } from '@/components/common/ui/Form';
import { Alert } from '@/components/common/ui/Alert';
import { Modal } from '@/components/common/ui/Modal';Best Practices
- • Always use existing components before creating custom ones
- • Follow the established variant and size patterns
- • Use Heroicons for all icon needs
- • Apply text-left alignment consistently
- • Implement proper error states for forms
- • Test keyboard accessibility