TOTM UI Components

A React Native component library built on Tamagui, designed for cross-platform applications.

Note: This is a demo project for my professional portfolio.

Installation

npm install @puzzlebottom/totm-ui-components
# or
yarn add @puzzlebottom/totm-ui-components

Required Peer Dependencies

All platforms require:

npm install react tamagui @tamagui/config react-native-svg

Platform-Specific Dependencies

For React Native / Expo:

npm install react-native @react-native-masked-view/masked-view expo-linear-gradient

For Web:

npm install react-dom react-native-web

Usage

Wrap your app with the UIProvider:

import { UIProvider, Button, GradientText } from '@puzzlebottom/totm-ui-components'

function App() {
  return (
    <UIProvider>
      <Button>Click me</Button>
      <GradientText>Beautiful gradient text</GradientText>
    </UIProvider>
  )
}

Development Setup

# Install dependencies
yarn install

# Generate type declarations (watches for changes)
cd src
yarn dev

# Or build types once
yarn build

Running Storybook

Web

cd dev/web
yarn storybook

Mobile (Expo)

cd dev/native
yarn start

Built With

• Tamagui - Universal UI components
• React Native - Cross-platform framework
• Expo - Development tooling
• Storybook - Component development environment

License

MIT