One Guide

How to set up Tamagui with One

One is a Vite-based React framework for web, iOS, and Android with built-in Tamagui integration.

Install

First, create a new One project:

yarnnpmbunpnpm
yarn dlx one

Add Tamagui and its dependencies. @tamagui/cli carries the Vite plugin used below, alongside the CLI and the other bundler integrations:

yarnnpmbunpnpm
yarn add tamagui @tamagui/config
yarn add -D @tamagui/cli

Configuration

Create a tamagui.config.ts file in your project root:

tamagui.config.ts
import { defaultConfig } from '@tamagui/config/v6'
import { createTamagui } from 'tamagui'

const tamaguiConfig = createTamagui(defaultConfig)

export default tamaguiConfig

// this is important!
export type Conf = typeof tamaguiConfig

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

Update your vite.config.ts:

vite.config.ts
import { one } from 'one/vite'
import { tamaguiPlugin } from '@tamagui/cli/vite'
import type { UserConfig } from 'vite'

export default {
  plugins: [
    one({
      web: {
        defaultRenderMode: 'ssg',
      },
    }),
    tamaguiPlugin({
      config: './tamagui.config.ts',
      components: ['tamagui'],
    }),
  ],

  // Vite 6 style configuration
  ssr: {
    noExternal: true,
  },

  optimizeDeps: {
    include: ['@tamagui/core', '@tamagui/config'],
  },

  build: {
    cssTarget: 'safari15',
  },
} satisfies UserConfig

Setup Tamagui Provider

Update your root layout file (typically app/_layout.tsx):

app/_layout.tsx
import { TamaguiProvider } from 'tamagui'
import { Slot } from 'one'
import config from '../tamagui.config'

export default function Layout() {
  return (
    <TamaguiProvider config={config}>
      <Slot />
    </TamaguiProvider>
  )
}

Usage

Now you can use Tamagui components in your One app:

app/index.tsx
import { Button, YStack, html } from 'tamagui'

export default function Home() {
  return (
    <YStack flex={1} justify="center" items="center" p="4" gap="4">
      <html.h1 fontSize="6">Welcome to Tamagui with One!</html.h1>
      <Button>Click me</Button>
    </YStack>
  )
}

Themes

To support light and dark modes, use One’s built-in color scheme support along with Tamagui’s theming system. Update your root layout:

app/_layout.tsx
import { TamaguiProvider, Theme } from 'tamagui'
import { Slot } from 'one'
import { useColorScheme } from 'react-native'
import config from '../tamagui.config'

export default function Layout() {
  const colorScheme = useColorScheme()

  return (
    <TamaguiProvider config={config} defaultTheme={colorScheme}>
      <Theme name={colorScheme}>
        <Slot />
      </Theme>
    </TamaguiProvider>
  )
}

Performance

For better performance, use the outputCSS option in the Tamagui Vite plugin:

vite.config.ts
tamaguiPlugin({
  config: './tamagui.config.ts',
  components: ['tamagui'],
  outputCSS: process.env.NODE_ENV === 'production' ? './public/tamagui.generated.css' : null,
})

Then import the CSS in your root layout:

app/_layout.tsx
import '../public/tamagui.generated.css'
// ... rest of your imports and component

Next Steps

You now have Tamagui set up with One.

Vite

Webpack

Edit this page on GitHub.