UI Components
True Life includes a comprehensive set of shadcn/ui-inspired components built with React. These components are designed for the in-game UI and follow modern web development patterns.
Interactive Component Gallery
Explore all components with live examples and documentation in our Storybook.
Open Component Gallery →
Available Components
Layout & Structure
| Component | Description |
|---|---|
| Accordion | Expandable content sections with smooth animations |
| AspectRatio | Maintain consistent aspect ratios for media |
| Card | Container for grouping related content |
| Collapsible | Toggle visibility of content sections |
| ScrollArea | Custom scrollbar with consistent styling |
| Separator | Visual divider between content sections |
| Tabs | Organize content into tabbed sections |
Forms & Inputs
| Component | Description |
|---|---|
| Button | Primary interactive element with variants |
| Checkbox | Boolean input with label support |
| DatePicker | Calendar-based date selection |
| Label | Accessible form labels |
| RadioGroup | Single selection from multiple options |
| Select | Dropdown selection with search |
| Slider | Range input with visual feedback |
| Switch | Toggle between two states |
| TextInput | Text entry with validation support |
Feedback & Display
| Component | Description |
|---|---|
| Alert | Contextual feedback messages |
| AlertDialog | Modal confirmation dialogs |
| AnimatedNumber | Smooth number transitions |
| Avatar | User profile images with fallback |
| Badge | Status indicators and labels |
| Progress | Visual progress indicators |
| Skeleton | Loading placeholder animations |
| Tooltip | Contextual information on hover |
Navigation & Menus
| Component | Description |
|---|---|
| Breadcrumb | Hierarchical navigation trail |
| Command | Command palette with search |
| ContextMenu | Right-click context menus |
| DropdownMenu | Expandable menu options |
Overlays
| Component | Description |
|---|---|
| Dialog | Modal dialogs for focused interactions |
| HoverCard | Rich preview cards on hover |
| Popover | Floating content containers |
| Sheet | Slide-in panels from edges |
Utility
| Component | Description |
|---|---|
| Kbd | Keyboard shortcut indicators |
| Table | Data tables with sorting and selection |
Usage Example
All components are exported from @ui/components/ui:
"use web";
import { Button } from "@ui/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@ui/components/ui/card";
import { Badge } from "@ui/components/ui/badge";
export default function MyPanel() {
return (
<Card>
<CardHeader>
<CardTitle>
Player Status
<Badge variant="secondary">Online</Badge>
</CardTitle>
</CardHeader>
<CardContent>
<Button variant="outline" size="sm">
View Profile
</Button>
</CardContent>
</Card>
);
}Styling
Components use Tailwind CSS with CSS variables for theming. The dark theme is automatically applied in the game UI.
CSS Variables
:root {
--background: 0 0% 4%;
--foreground: 0 0% 98%;
--card: 0 0% 7%;
--card-foreground: 0 0% 98%;
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 0 0% 100%;
/* ... and more */
}See the Storybook for complete styling documentation and all component variants.