Comprehensive showcase of Triber's UI components, colors, and typography
💡 Use the theme and font switchers (bottom-right) to see live updates across all components
Current theme colors with CSS variable references
Background
--scheme-background
Secondary
--scheme-secondary
Primary
--scheme-primary
Foreground
--scheme-foreground
Muted Foreground
--scheme-muted-foreground
Border
--scheme-border
Card
--scheme-card
Font pairings with live preview
H1 - 2.25rem (36px)
H2 - 1.875rem (30px)
H3 - 1.5rem (24px)
H4 - 1.25rem (20px)
Body - 1rem (16px)
This is body text. Triber is a comprehensive platform for creating and managing tribes (communities) with integrated event creation and ticketing capabilities.
Small - 0.875rem (14px)
This is small text used for descriptions and secondary information throughout the interface.
Extra Small - 0.75rem (12px)
This is extra small text used for labels, captions, and metadata.
Input fields and form components
Status indicators and labels
User profile images with fallbacks
Content containers
This is the card content area where main information is displayed.
📅 March 15, 2025
📍 Copenhagen, Denmark
👥 50 attendees
A community for technology lovers in Denmark
Interactive form elements
Tabs, switches, tooltips, progress bars, and accordions
Your upcoming events will be displayed here.
March 15, 2025 • 50 attending
Receive email about your events
Make your profile visible to everyone
Contextual feedback messages
Modal windows and side panels
Skeleton loaders and placeholders