Component Inventory
Reference of key components with their corresponding Figma designs.
Layout
| Component | Description | Design Reference |
|---|---|---|
AppBar | Energy header pill (sun icon + count) | deck-creatures.png |
BottomTabBar | Deck / Garden / Profile navigation | All screens |
PageShell | Wraps views with AppBar + BottomTabBar | All screens |
Cards
| Component | Description | Design Reference |
|---|---|---|
PlantCard | Name + type badge + photo thumbnail | deck-plants.png |
CreatureCard | Name + element badge + art + optional CTA | deck-creatures.png |
Detail Sheets
| Component | Description | Design Reference |
|---|---|---|
PlantDetail | Info/Care tabs, hero photo, health bar | plant-care-tab.png, plant-info-tab.png |
CreatureDetail | Nurture/Evolution tabs, hero on gradient | creature-nurture-tab.png, creature-evolution-tab.png |
Filters
| Component | Description | Design Reference |
|---|---|---|
FilterSheet | Element chips, health icons, level chips | filter-plants.png, filter-creatures.png |
Garden
| Component | Description | Design Reference |
|---|---|---|
CameraView | Full-screen camera with prompt chip | garden-camera.png |
ARNurtureView | Creature in AR + energy slider + confirm | ar-nurture.png |
AREvolutionView | Creature with glow + confirm evolution | ar-evolution-confirm.png |
EnergySlider | Range input with numeric thumb badge | ar-nurture-slider.png |
Feedback
| Component | Description | Design Reference |
|---|---|---|
CelebrationModal | Hero image + heading + Share/View CTAs | celebration-fed.png |
RewardToast | Non-blocking top banner | In-game screens |
Game
| Component | Description |
|---|---|
GameCanvas | R3F canvas with AR/non-AR modes |
BoardRenderer | 3D board meshes (grid or pits) |
BoardPlacer | AR hit test + anchor placement |
GamePiece | 3D model or 2D sprite billboard |
GameHUD | Turn indicator, score, reward area |
Forms
| Component | Description |
|---|---|
ElementSelector | 4 large element choice cards |
CareChecklist | Watered / Pruned / Observed / Cleaned |
LocationInput | Text + geolocation button |
EnergySlider | Range with numeric badge |
Navigation
| Component | Description |
|---|---|
ChoiceCardGrid | 2-up card grid for game/mode selection |
SegmentedTabs | Plants / Creatures toggle in Deck |