@girumtech/react

React web entry point for GsDesignSystem, a TypeScript design system built with Tamagui. It exports the shared components, four themes, path-based icons, and curated web-compatible layout primitives.

Requirements

• React 19 or newer
• React DOM 19 or newer
• Tamagui 2.7
• React Native Web 0.21 or newer
• React Native SVG 15 or newer

Installation

npm install @girumtech/react tamagui react-native-web react-native-svg

Vite setup

Tamagui uses React Native-compatible modules on the web. Alias react-native to react-native-web and expose the build environment in Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  define: {
    'process.env': JSON.stringify({
      NODE_ENV: mode === 'production' ? 'production' : 'development',
      TAMAGUI_HEADLESS: '0',
    }),
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
  },
}))

Application setup

Add GsProvider once near the application root. It supplies the Tamagui configuration, tokens, and default theme.

// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { GsProvider } from '@girumtech/react'
import { App } from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <GsProvider defaultTheme="blue">
      <App />
    </GsProvider>
  </StrictMode>,
)

Available themes are red, red_dark, blue, and blue_dark.

Components

import { Button, Field, Text, XStack, YStack } from '@girumtech/react'

export function SignIn() {
  return (
    <YStack maxWidth={420} padding="$5" gap="$4" backgroundColor="$background">
      <Text variant="title">Welcome back</Text>
      <Text tone="muted">Sign in to continue.</Text>

      <Field
        id="email"
        label="Email"
        placeholder="[email protected]"
        helperText="Use your work email."
      />

      <XStack gap="$3">
        <Button onPress={() => console.log('Continue')}>Continue</Button>
        <Button intent="secondary">Cancel</Button>
      </XStack>
    </YStack>
  )
}

Buttons and inputs use the active theme accent for their border by default. Override it with the standard Tamagui borderColor prop:

<Button borderColor="#7C3AED">Custom border</Button>
<Field id="code" label="Code" borderColor="#7C3AED" />

Switching and forcing themes

Use Theme to force a theme for a subtree. The theme name is fully typed.

import { Theme, View, Text, type GsThemeName } from '@girumtech/react'

const theme: GsThemeName = 'red_dark'

export function AlertPreview() {
  return (
    <Theme name={theme}>
      <View padding="$4" backgroundColor="$background">
        <Text tone="accent">This subtree uses red dark.</Text>
      </View>
    </Theme>
  )
}

Icons

Use a built-in icon or provide one or more SVG path definitions:

import { Icon, NamedIcon, type IconPath } from '@girumtech/react'

const spark: readonly IconPath[] = [
  {
    d: 'M12 2 14.5 9.5 22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5L12 2Z',
    fill: 'currentColor',
  },
]

export function Icons() {
  return (
    <>
      <NamedIcon name="heart" size={28} color="#A81D1D" label="Favorite" />
      <Icon paths={spark} size={32} color="#10106B" label="Spark" />
    </>
  )
}

Decorative icons may omit label; meaningful icons should provide one.

Exports

The package exports GsProvider, Theme, Button, Input, Field, Text, Icon, NamedIcon, tokens, themes, and the curated Anchor, Image, ScrollView, Separator, View, XStack, YStack, and ZStack primitives.