Breadcrumbs
Navigation path indicator
Primary Colors
Primary
Action buttons, links
Primary Foreground
Text on primary bg
Secondary Colors
Secondary
Secondary actions
Muted
Disabled states
Semantic Colors
Success
Positive feedback
Error
Error states
Headings - Crimson Text (Serif)
Display Heading
text-5xl font-bold
Heading 1
text-4xl font-bold
Heading 2
text-3xl font-bold
Heading 3
text-2xl font-semibold
Heading 4
text-xl font-semibold
Body Text - Source Sans Pro
Large body text for emphasis or introductions. Perfect for making important content stand out.
text-lg leading-relaxed
Regular body text for general content. This is the default size for most paragraph text.
text-base
Small text for secondary information or metadata.
text-sm
Extra small text for labels or timestamps.
text-xs text-muted-foreground
Button Variants
Different button styles for various use cases
Main actions
Alternative actions
Dangerous actions
Bordered style
Minimal style
Text link style
Positive actions
Caution actions
Button Sizes
Size variations for different contexts
Full Width Buttons
Button States
Interactive states and behaviors
Hover States (hover over buttons)
Disabled States
Loading States
Buttons with Icons
Icon placement and combinations
Icon-only Buttons
Alert Variants
Different alert styles for various types of messages
Alert Features
Additional alert functionality and layouts
Badge Variants
Labels and tags for categorization
Variants
Shapes
Usage Examples
Input Fields
Text input variations and states
This field is required
Please enter a valid value
Select & Textarea
Dropdown and multiline text inputs
0/200 characters
Filter Components
Interactive filtering and selection
Pagination
Navigate through large datasets
Basic Card
Standard card with header and content
Cards are used to group related content and provide visual hierarchy. They can contain any type of content.
Hoverable Card
Interactive card with hover effect
This card has a hover effect that lifts it slightly and adds a shadow. Perfect for clickable items.
WordCard
Nginda
You
Yirrbal
Language, words, speaking
85%
Accuracy
1.2s
Avg Time
15
Attempts
Today
Last Seen
Nganyja
To see, look, watch
WordLikeButton
Sizes:
Variants:
With Labels:
Total Questions
1,234
Questions answered this month
Accuracy Rate
87.5%
Study Streak
14 days
Words Learned
256
12 new words this week
Time Spent
3h 24m
Average per session: 12m
Achievement Progress
Level 5
180 XP to next level
Data Table
Table with caption and footer
| Word | Type | Definition | Actions |
|---|---|---|---|
| ngayu | pron | I, me | |
| nyulu | pron | he, she, it | |
| wanju | inter | where | |
| Total | 3 words | ||
Loading Components
Various loading indicators
Spinner Sizes
Loading State
Loading...
Loading Skeleton
Empty States
When there's no data to display
No results found
Try adjusting your search criteria or browse all entries.
Dictionary is empty
Start adding words to build your dictionary.
Basic Skeletons
Loading placeholders for different content types
Base Skeleton
Card Skeleton
Word Card Skeleton
Complex Skeletons
Full layout loading states
Table Skeleton
Dictionary Entry
Individual word display
babaji
trv
ask, inquire
Ngayu nyungundu babajin, Wanju nyulu?
waybul
n
white person, European
Waybul jana-ny kari nganyi.
Also: waibul, waybel
Dictionary List
Multiple entries in a list format
I, me
he, she, it
where
Auth Forms
Sign in and sign up forms
Sign in
Enter your email below to sign in to your account
Lucide Icons
Comprehensive icon library used throughout the application
Spacing Scale
Consistent spacing system based on Tailwind defaults
Best Practices
Guidelines for using components effectively
Component Selection
- Buttons: Use primary for main actions, secondary for alternatives, outline for tertiary actions
- Alerts: Success for confirmations, info for neutral messages, warning for cautions, error for failures
- Badges: Use for categorization, status indicators, or counts
- Cards: Group related content, use hover effect for clickable items
- Loading States: Always show loading feedback for async operations
Accessibility
- All interactive elements must be keyboard accessible
- Use semantic HTML and ARIA labels where appropriate
- Maintain sufficient color contrast ratios
- Provide alternative text for icons and images
Consistency
- Use the established color palette and typography scale
- Maintain consistent spacing using the spacing scale
- Follow the established patterns for similar functionality
- Use the same icons for the same actions throughout the app