@anilreddy11/trivo-ui

Shared design system for Trivo — a dark-theme React Native component library used by trivo-mobile and trivo-web.

Install

npm install @anilreddy11/trivo-ui

Peer dependencies

Your app must already include:

• react
• react-native
• react-native-reanimated
• react-native-svg
• react-native-gesture-handler
• expo-haptics

Configure Reanimated in your app's babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Quick start

import {
  PageContainer,
  MacroRing,
  SectionHeader,
  colors,
} from '@anilreddy11/trivo-ui';

export function FitnessToday() {
  return (
    <PageContainer>
      <SectionHeader title="Today" subtitle="Your macros" />
      <MacroRing
        calories={{ current: 1420, goal: 2000 }}
        protein={{ current: 98, goal: 150 }}
        carbs={{ current: 145, goal: 200 }}
        fat={{ current: 42, goal: 65 }}
        size={260}
        animated
      />
    </PageContainer>
  );
}

Design tokens

All colors, spacing, typography, and radius values live in tokens:

import { colors, spacing, radius, fontSize, fontWeight } from '@anilreddy11/trivo-ui';

const card = {
  backgroundColor: colors.bg.surface,
  padding: spacing.md,
  borderRadius: radius.md,
};

Never hardcode hex values in consuming apps — import from tokens.

Components

Primitives

| Component | Description | |------------|--------------------------------------------------| | Box | Layout container with spacing props | | Text | Typography with token-based size/weight/color | | Pressable| Reanimated scale press + optional haptic feedback|

Layout

| Component | Description | |-----------------|-----------------------------| | PageContainer | Safe-area scrollable screen | | SectionHeader | Title + optional action | | Divider | Horizontal or vertical rule |

Data display

| Component | Description | |---------------|--------------------------------------------------| | MacroRing | Signature 4-ring animated macro progress | | StatCard | Metric card with accent stripe | | ProgressBar | Animated horizontal bar | | SpendingBar | Stacked budget breakdown | | NutrientRow | Label + progress for one nutrient | | WeightChart | Simple SVG weight trend |

Forms

| Component | Description | |-------------------|--------------------------------| | Input | Text field with label/error | | SearchBar | Debounced search with clear | | QuantitySelector| +/- stepper | | SegmentedControl| Tab-style option picker |

Feedback

| Component | Description | |-------------|--------------------------| | Toast | Auto-dismiss notification| | Modal | Centered overlay dialog | | Skeleton | Loading placeholder | | EmptyState| Zero-data CTA screen |

Trivo AI

| Component | Description | |------------------|--------------------------------| | ChatBubble | User vs assistant message | | TrivoAIInput | Chat input with focus animation| | QuickAddPill | Horizontal suggestion chips | | TypingIndicator| Animated thinking dots | | ApiKeySetup | Anthropic API key onboarding |

MacroRing

The hero fitness component — four concentric rings (calories → protein → carbs → fat) with spring animation, SVG glow on the active ring, and danger + shake when any macro exceeds 100% of goal.

<MacroRing
  calories={{ current: 2100, goal: 2000 }}
  protein={{ current: 120, goal: 150 }}
  carbs={{ current: 180, goal: 200 }}
  fat={{ current: 70, goal: 65 }}
  size={280}
  animated
/>

Ring colors map to tokens:

• Calories → colors.semantic.info
• Protein → colors.brand.fitness
• Carbs → colors.brand.focus
• Fat → colors.brand.finance

Development

cd trivo-ui
npm install
npm run build

Build output goes to dist/ via TypeScript (tsc).

Publishing

npm login
npm publish --access public

Start at 0.1.0, follow semver for breaking changes.

License

MIT