### Tamagui Installation and Next Steps

Source: https://tamagui.dev/docs/intro/installation

This snippet outlines the initial steps after installing Tamagui, guiding users to explore CLI tools, bundler setups, and design system creation. It also mentions the optional compiler setup for performance enhancements.

```jsx
import { View, Text, styled } from '@tamagui/core'
import { Heading } from './Heading'

const App = (props) => (
  <>
    <Text>Welcome to Tamagui!</Text>
    <View>
      <Text>Once you have Tamagui installed, you’ll want to explore:</Text>
      <List>
        <ListItem>
          <Strong>
            <A href="/docs/guides/cli">CLI</A>
          </Strong>
          - Command-line tools for building, optimizing, and
          managing your Tamagui projects
        </ListItem>
        <ListItem>
          <Strong>
            <A href="/docs/guides/next-js">Bundler Setup</A>
          </Strong>
          - Integration guides for Next.js,
          Expo, Vite, Webpack, Metro, and more
        </ListItem>
        <ListItem>
          <Strong>
            <A href="/docs/guides/design-systems">Design Systems</A>
          </Strong>
          - Build your own optimized
          component library with Tamagui
        </ListItem>
      </List>
      <Text>
        Later on, you can <A href="/docs/intro/compiler-install">set up the compiler</A> to gain
        more performance and some nice development helpers.
      </Text>
    </View>
    <HR />
    <H2 id="bundler-guides">Bundler Guides</H2>
    <Text>
      Tamagui generally doesn’t require any special bundler setup as we’ve worked hard
      to make it “just work” without configuration in a wide variety of environments.
    </Text>
    <Text>
      That said, the broader React Native and React Native Web ecosystem is filled
      with packages that do need configuration. Tamagui provides a variety of bundler
      plugins that help with that:
    </Text>
    <H />
    <C gap="$4">
      <S title="Next.js" img="/logos/next-js.svg" link="/docs/guides/next-js" subtitle="Full-featured React framework with great developer experience." colorOffset={2} />
      <S title="Expo" img="/logos/expo.svg" link="/docs/guides/expo" subtitle="Platform for creating universal native apps with JavaScript and React." colorOffset={6} />
      <S title="Vite" img="/logos/vite.svg" link="/docs/guides/vite" subtitle="Fast and modern development server and build tool." colorOffset={1} />
      <S title="Webpack" img="/logos/webpack.svg" link="/docs/guides/webpack" subtitle="Powerful module bundler for modern JavaScript applications." colorOffset={0} />
      <S title="Metro" img="/logos/metro.svg" link="/docs/guides/metro" subtitle="Fast, scalable, and serverless JavaScript bundler for React Native." colorOffset={3} />
      <S title="One" img="/logos/one.svg" link="/docs/guides/one" subtitle="Universal React framework with native support." colorOffset={4} />
    </C>
  </>
)

function k(a = {}) {
  let { wrapper: e } = a.components || {}
  return e ? <e {...a} children={<g {...a} />} /> : g(a)
}

function l(a, e) {
  throw new Error(`Expected ` + (e ? "component" : "object") + ` ``` + a + `` to be defined: you likely forgot to import, pass, or provide it.`)
}

return j(P);
})();
;return Component;
```

--------------------------------

### PortalProvider Setup

Source: https://context7_llms

Instructions on how to install and implement the PortalProvider at the root of your application.

```APIDOC
## PortalProvider

### Description

Provides a context for rendering portal content. When rendering into the root of the app, you need to install the `@tamagui/portal` package and add `PortalProvider` to your app's root.

### Installation

```bash
npm install @tamagui/portal
```

### Usage

```tsx fileName="App.tsx"
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

### Props

#### Query Parameters

- **shouldAddRootHost** (boolean) - Optional - Defines whether to add a default root host or not.
```

--------------------------------

### Dialog Installation and Setup

Source: https://context7_llms

Provides instructions for installing the Tamagui Dialog component. It can be used directly from `tamagui` or installed independently using npm. If installed independently, the `@tamagui/portal` package is also required, and `PortalProvider` must be added to the application's root.

```bash
npm install @tamagui/dialog
```

```bash
npm install @tamagui/portal
```

--------------------------------

### Expo Project Setup Commands

Source: https://tamagui.dev/docs/guides/expo

This snippet shows common commands for starting and running an Expo project. It includes commands for clearing the cache, running on Android, running on iOS, and starting the web version.

```bash
expo start -c
yarn expo run:android
yarn expo run:ios
expo start --web
```

--------------------------------

### Install react-native-teleport for Native Portal Setup

Source: https://tamagui.dev/docs/components/portal

This command installs the 'react-native-teleport' package, which is recommended for native environments to ensure React context is preserved when using portals. It's a crucial step before importing the setup module.

```bash
npm install react-native-teleport

```

--------------------------------

### NextThemeProvider Installation

Source: https://tamagui.dev/docs/guides/next-js

Install the necessary package for NextThemeProvider using yarn.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of a new user in the system. It accepts user details in the request body and returns the created user's information.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **limit** (integer) - Optional - The maximum number of users to return.

#### Request Body
- **username** (string) - Required - The desired username for the new user.
- **email** (string) - Required - The email address of the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier for the created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": 1,
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Tamagui v5 Configuration Example (JSX)

Source: https://tamagui.dev/docs/core/config-v5

An example of Tamagui v5 configuration in JSX, demonstrating the structure and basic setup. It includes frontmatter with title and description, and a main component function that renders introductory paragraphs and installation instructions.

```jsx
var Component=(()=>{
var p=Object.create;
var s=Object.defineProperty;
var u=Object.getOwnPropertyDescriptor;
var g=Object.getOwnPropertyNames;
var k=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;
var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{
for(var t in e)s(a,t,{get:e[t],enumerable:!0})
};
var r=(a,e,t,l)=>{
if(e&&typeof e=="object"||typeof e=="function")
for(let i of g(e))
!N.call(a,i)&&i!==t&&s(a,i,{get:()=>e[i],enumerable:(l=u(e,i))||l.enumerable
});
return a
};
var y=(a,e,t)=>(
	t(t=a!=null?p(k(a)):{}),
	r(e||!a||!a.__esModule?s(t,"default",{value:a,enumerable:!0}):t,a)
);
var w=a=>r(s({},"__esModule",{value:!0}),a);
var o=f((C,d)=>{
	d.exports=_jsx_runtime
});
var x={};

v(x,{default:()=>m,frontmatter:()=>b});
var n=y(o());
var b={
	title:"Config v5",
	description:"Modern config and themes with @tamagui/config/v5"
};
function h(a){
let e={"a":"a","code":"code","div":"div","h2":"h2","h3":"h3","hr":"hr","li":"li","ol":"ol","p":"p","pre":"pre","span":"span","strong":"strong","ul":"ul",...
a.components
};
let {IntroParagraph:t,Notice:l,PropsTable:i}=e;
t||c("IntroParagraph",!0),
l||c("Notice",!0),
i||c("PropsTable",!0)
;
return(0,n.jsxs)(n.Fragment,{
	children:[
		(0,n.jsx)(t,{
			children:(0,n.jsx)(e.p,{children:`The recommended Tamagui configuration gives you a complete design system, flexible theme\ngeneration, Tailwind aligned shorthands, multiple animation drivers, and easy\ncustomization.`})
		}),
		"\n",
		(0,n.jsxs)(e.p,{children:[
			`V5 builds on v4 with more colors, theme helpers, and expanded media queries.\nMigration from v4 is straightforward - see\n`,
			(0,n.jsx)(e.a,{href:"#whats-different-from-v4",children:"what’s changed"}),
			"."
		]}),
		"\n",
		(0,n.jsx)(e.p,{children:"First install the config package:"
		}),
		"\n",
		(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-bash",children:(0,n.jsxs)(e.div,{"data-line":"1",className:"highlight-line", "data-highlighted":"true",children:[
			(0,n.jsx)(e.span,{className:"token function",children:"npm"}),
			" ",
			(0,n.jsx)(e.span,{className:"token function",children:"install"}),
			` @tamagui/config\n`
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																							
```

--------------------------------

### Install Tamagui CLI

Source: https://tamagui.dev/docs/intro/installation

Use the Tamagui CLI to create a new project with a starter template. This command initiates the setup process for Tamagui.

```bash
npm create tamagui@latest
```

--------------------------------

### Tamagui CLI Build Command Examples (Terminal)

Source: https://tamagui.dev/docs/guides/next-js

Illustrates how to use the Tamagui CLI for targeted builds. Examples show how to specify individual files or use glob patterns with `--include` and `--exclude` options to optimize specific parts of the project before the Next.js build.

```bash
# Target specific files  tamagui build --target web ./src/components/Button.tsx ./src/components/Card.tsx -- next build  # Use glob patterns  tamagui build --target web --include "src/components/**/*.tsx" --exclude "src/components/**/*.test.tsx" ./src -- next build
```

--------------------------------

### Setup PortalProvider in App (TypeScript)

Source: https://tamagui.dev/docs/components/popover

Example of how to import and include the PortalProvider component in your application's root file (e.g., App.tsx). This is necessary for independent Popover installations.

```tsx
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {

```

--------------------------------

### Installation and Native Setup

Source: https://tamagui.dev/docs/components/linear-gradient

Instructions for installing and setting up the linear-gradient package for native applications.

```APIDOC
## Installation and Native Setup

### Description
Guides users through the process of installing the `expo-linear-gradient` package and configuring it for use with Tamagui, including steps for projects without Expo.

### Method
N/A (Setup Guide)

### Endpoint
N/A (Setup Guide)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Step 1: Install expo-linear-gradient
```bash
npm install expo-linear-gradient
# or
yarn add expo-linear-gradient
```

#### Step 2: Import the setup module
```tsx
// tamagui.config.ts
import { config } from '@tamagui/core'
import 'expo-linear-gradient'

export default config({
  // ... your other configurations
})
```

#### Without expo-linear-gradient
For projects not using Expo, you might need to manually link or configure native dependencies. Refer to the `expo-linear-gradient` documentation for specific instructions.
```

--------------------------------

### Setup Native Menus and ContextMenus with Zeego

Source: https://context7_llms

Integrates platform-native context menus for Menu and ContextMenu components using Zeego. Requires installing several packages and importing the Zeego setup module.

```bash
npm install zeego @react-native-menu/menu react-native-ios-context-menu react-native-ios-utilities sf-symbols-typescript
```

```tsx
// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-zeego'

// Then use the `native` prop:
<Menu native>{/* menu content */}</Menu>
```

--------------------------------

### Native Toast Setup

Source: https://tamagui.dev/docs/components/toast

Instructions for installing and importing the native toast setup module for Tamagui to enable native toasts on iOS and Android using the Burnt library.

```APIDOC
## Native Toast Setup

### Description

To enable native toasts on iOS and Android using the Burnt library, you need to install the native dependency and import the setup module in your application.

### Installation

Use your preferred package manager:

**Yarn:**
```bash
yarn add burnt
```

**NPM:**
```bash
npm install burnt
```

**Bun:**
```bash
bun add burnt
```

**PNPM:**
```bash
pnpm add burnt
```

### Import

Add the following import statement to your `App.tsx` file *before* any Tamagui imports:

```typescript
import '@tamagui/native/setup-burnt'
```

### Rebuild App

After adding the import, rebuild your React Native application. Without this setup, toasts will still function but the `native` prop will not have any effect on mobile platforms.

### Anatomy

The core components for toasts are:

```jsx
<ToastProvider>
  <Toast>
    <Toast.Title />
    <Toast.Description />
    <Toast.Action />
    <Toast.Close />
  </Toast>
  <ToastViewport />
</ToastProvider>
```
```

--------------------------------

### Install react-native-teleport for Native Portal Setup

Source: https://tamagui.dev/docs/components/portal

This snippet shows how to install the react-native-teleport package using various package managers. This is the recommended approach for setting up portals on native platforms to ensure React context is preserved.

```bash
yarn add react-native-teleport
```

```bash
npm install react-native-teleport
```

```bash
bun add react-native-teleport
```

```bash
pnpm add react-native-teleport
```

--------------------------------

### Install NextThemeProvider with Yarn

Source: https://tamagui.dev/docs/guides/next-js

This command installs the necessary package for the NextThemeProvider. It's a straightforward installation process using the yarn package manager.

```bash
yarn add @tamagui/next-theme

```

--------------------------------

### Tamagui Stripped Down Configuration Example

Source: https://tamagui.dev/docs/core/configuration

A minimal example of a Tamagui configuration file, illustrating core concepts for beginners. This serves as a starting point for understanding Tamagui's configuration structure.

```typescript
import { defaultConfig } from '@tamagui/config/v5'
import { createTamagui } from 'tamagui'

export const config = createTamagui({
  ...defaultConfig,
  // Add your custom configurations here
})
```

--------------------------------

### Install @tamagui/native Package

Source: https://context7_llms

Installs the @tamagui/native package, which provides setup utilities for native integrations. This should be imported at the app's entry point before any Tamagui imports.

```bash
npm install @tamagui/native
```

--------------------------------

### Tamagui Provider Setup Example (TSX)

Source: https://tamagui.dev/docs/components/portal

This code snippet illustrates the setup of TamaguiProvider, a core component for configuring the Tamagui environment within an application. It shows how to wrap the application's root with TamaguiProvider to enable theme management and other global configurations. This is essential for ensuring all Tamagui components function correctly.

```tsx
import { TamaguiProvider } from 'tamagui';

// ... other imports and component definitions

<TamaguiProvider>
  {/* Your application content here */}
</TamaguiProvider>
```

--------------------------------

### Install and Use PortalProvider for Root Rendering

Source: https://tamagui.dev/ui/sheet/1.59.0

Guide to installing the `@tamagui/portal` package and integrating `PortalProvider` into your application's root for rendering components at the root level instead of inline. This is necessary for specific rendering scenarios.

```bash
yarn add @tamagui/portal
```

```bash
npm install @tamagui/portal
```

```bash
bun add @tamagui/portal
```

```bash
pnpm add @tamagui/portal
```

```typescript
import { PortalProvider } from '@tamagui/portal'  import YourApp from './components/YourApp'  function App() {    return (      <PortalProvider shouldAddRootHost>        <YourApp />      </PortalProvider>    )  }  export default App
```

--------------------------------

### TamaguiProvider Setup Example (JSX)

Source: https://tamagui.dev/docs/core/configuration

This snippet demonstrates the basic structure for setting up TamaguiProvider in a React application. It includes essential configurations like 'config' and wraps child components.

```jsx
import { TamaguiProvider, View } from 'tamagui'

export default function App() {
  return (
    <TamaguiProvider config={config}>
      <View>
        <View data-line="5" className="highlight-line" data-highlighted="true">
          {' '}
          <span className="token tag">
            <span className="token tag">
              <span className="token punctuation">&lt;</span>
              <span className="token class-name">TamaguiProvider</span>
            </span>{' '}
            <span className="token attr-name">config</span>
            <span className="token script language-javascript">
              <span className="token script-punctuation punctuation">=</span>
              <span className="token punctuation">{</span>
              config
              <span className="token punctuation">}</span>
            </span>
            <span className="token punctuation">&gt;</span>
          </span>
          <span className="token plain-text"></span>
          
        </View>
        <View data-line="6" className="highlight-line" data-highlighted="true">
          {' '}
          <span className="token tag">
            <span className="token tag">
              <span className="token punctuation">&lt;</span>
              <span className="token class-name">View</span>
            </span>{' '}
            <span className="token attr-name">margin</span>
            <span className="token attr-value">
              <span className="token punctuation attr-equals">=</span>
              <span className="token punctuation">'</span>
              $sm
              <span className="token punctuation">'</span>
            </span>{' '}
            <span className="token punctuation">/&gt;</span>
          </span>
          <span className="token plain-text"></span>
          
        </View>
        <View data-line="7" className="highlight-line" data-highlighted="true">
          {' '}
          <span className="token tag">
            <span className="token tag">
              <span className="token punctuation">&lt;/</span>
              <span className="token class-name">TamaguiProvider</span>
            </span>
            <span className="token punctuation">&gt;</span>
          </span>
          
        </View>
        <View data-line="8" className="highlight-line" data-highlighted="true">
          <span className="token punctuation">)</span>
          
        </View>
      </View>
    </TamaguiProvider>
  )
}

```

--------------------------------

### Install Reanimated for Tamagui

Source: https://tamagui.dev/docs/core/animations-reanimated

Installs the `@tamagui/animations-reanimated` and `react-native-reanimated` packages using Yarn. Ensure you follow the official Reanimated installation guide for platform-specific setup.

```bash
yarn add @tamagui/animations-reanimated react-native-reanimated
```

--------------------------------

### Toast Examples

Source: https://context7_llms

Examples demonstrating various ways to customize and position toast viewports, handle mobile safe areas, use different viewports, and pass custom data.

```APIDOC
## Toast Examples

### Position the viewport

To position the viewport on native toasts:

- iOS (burnt): Supports top or bottom placements. Adjustable by passing `from` to `burntOptions`:

```tsx
<ToastProvider burntOptions={{ from: 'bottom' }}>
```

- Android (burnt): Not supported.
- Web (Notification API): Not supported.

To position the viewport on custom toasts:

You should change the positioning of your [`<ToastViewport>`](#toastviewport). For instance, if you want them to appear from top right:

```tsx
<ToastViewport flexDirection="column-reverse" top={0} right={0} />
```

Or for bottom center:

```tsx
<ToastViewport flexDirection="column" bottom={0} left={0} right={0} />
```

<Notice theme="blue">
  When using multiple toasts, you can change the order of toasts by setting
  `flexDirection` to `column` or `column-reverse`. Or even have them stack horizontally
  using `row` or `row-reverse`.
</Notice>

### Mobile safe area

To show toasts inside device's safe area, install `react-native-safe-area-context` if you haven't, wrap your app inside `<SafeAreaProvider>`, and then use the safe area insets to position the viewport inside the safe area.

```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context'

const SafeToastViewport = () => {
  const { left, top, right } = useSafeAreaInsets()
  return (
    <ToastViewport flexDirection="column-reverse" top={top} left={left} right={right} />
  )
}
```

### Different viewports

To send toasts to different viewports, you can set up different viewports:

```tsx
const App = () => {
  return (
    <ToastProvider>
      <ToastViewport /> {/* default viewport */}
      <ToastViewport name="viewport-custom" />
    </ToastProvider>
  )
}
```

And then, use the viewport's name on the toasts.

```tsx
const MyComponent = () => {
  return <Toast /> // default viewport
}

const MyComponent2 = () => {
  return <Toast viewportName="viewport-custom" />
}
```

### Custom data

Just pass your custom data to the second parameter of the `show()` method.

```ts
const toastController = useToastController()
top.toastController.show('Title', { myPreset: 'error' }) // or top.toastController.show("Title", { customData: { myPreset: 'error' } })
```

then, when showing the toast, you can retrieve them like so:

```ts
const toastState = useToastState()
top.toastState.myPreset // or top.toastState.customData.myPreset
```

To add TypeScript auto-completion for your custom fields, you can use TS module augmentation:

```ts
declare module '@tamagui/toast' {
  interface CustomData {
    myPreset: 'error' | 'success' | 'warning'
  }
}
```

### Without hooks

You can also use toasts without the hooks.

<Notice>You can't use native toasts this way.</Notice>

#### Single Toast

```tsx
export default () => {
  const [open, setOpen] = React.useState(false)
  const timerRef = React.useRef(0)

  React.useEffect(() => {
    return () => clearTimeout(timerRef.current)
  }, [])

  return (
    <YStack ai="center">
      <Button
        onPress={() => {
          setOpen(false)
          window.clearTimeout(timerRef.current)
          timerRef.current = window.setTimeout(() => {
            setOpen(true)
          }, 150)
        }}
      >
        Single Toast
      </Button>
      <Toast
        onOpenChange={setOpen}
        open={open}
        animation="100ms"
        enterStyle={{ x: -20, opacity: 0 }}
        exitStyle={{ x: -20, opacity: 0 }}
        opacity={1}
        x={0}
      >
        <Toast.Title>Subscribed!</Toast.Title>
        <Toast.Description>We'll be in touch.</Toast.Description>
      </Toast>
    </YStack>
  )
}
```
```

--------------------------------

### Theme Toggle with useThemeSetting

Source: https://tamagui.dev/docs/guides/next-js

Example of how to use the `useThemeSetting` hook to get the current theme and toggle between themes in a React component.

```APIDOC
## PUT /api/users/{id}

### Description
This endpoint updates an existing user's information. It requires the user's ID in the path and the fields to update in the request body.

### Method
PUT

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The unique identifier of the user to update.

#### Request Body
- **username** (string) - Optional - The new username for the user.
- **email** (string) - Optional - The new email address for the user.

### Request Example
```json
{
  "email": "john.doe.updated@example.com"
}
```

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier for the updated user.
- **username** (string) - The updated username of the user.
- **email** (string) - The updated email address of the user.

#### Response Example
```json
{
  "id": 1,
  "username": "johndoe",
  "email": "john.doe.updated@example.com"
}
```
```

--------------------------------

### Get RNW Stylesheet

Source: https://tamagui.dev/docs/guides/next-js

Retrieves the stylesheet for react-native-web components. This is specifically noted as necessary if you are using react-native-web components within your Tamagui setup.

```javascript
const rnwStyle = StyleSheet.getSheet();
```

--------------------------------

### Install and Configure NextThemeProvider for SSR Themes

Source: https://tamagui.dev/docs/guides/next-js

This section details how to install and set up the `@tamagui/next-theme` package for managing SSR light/dark themes. It assumes your themes are named 'light' and 'dark', but this can be overridden. The example shows the necessary imports and configuration within `_app.tsx`.

```bash
yarn add @tamagui/next-theme
```

```tsx
import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
import { AppProps } from 'next/app'
import Head from 'next/head'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextThemeProvider>
      <Component {...pageProps} />
    </NextThemeProvider>
  )
}
```

--------------------------------

### Tamagui Configuration Example (v5)

Source: https://tamagui.dev/docs/core/configuration

A basic example of a Tamagui configuration file using the v5 preset. It demonstrates how to extend the default configuration with custom media queries.

```typescript
import { defaultConfig } from '@tamagui/config/v5'
import { createTamagui } from 'tamagui'

export const config = createTamagui({
  ...defaultConfig,
  media: {
    ...defaultConfig.media,
    // add your own media queries here, if wanted
  },
})

type OurConfig = typeof config

declare module 'tamagui' {
  interface TamaguiCustomConfig extends OurConfig {}
}
```

--------------------------------

### Basic Tamagui Button Component in Next.js Page

Source: https://tamagui.dev/docs/guides/next-js

A simple 'Hello world' example demonstrating the usage of a Tamagui `Button` component within a Next.js page. This requires the `tamagui` library to be installed and configured.

```typescript
'use client'  import { Button } from 'tamagui'  export default function Home() {    return <Button>Hello world!</Button>  }
```

--------------------------------

### Tamagui CLI Usage Examples

Source: https://tamagui.dev/docs/intro/compiler-install

Various command-line examples for using the `tamagui build` command, demonstrating how to build for different targets, specific files, include/exclude patterns, and verify optimizations.

```bash
# Build all components in a directory (web + native by default)
npx tamagui build ./src
```

```bash
# Build for web only
npx tamagui build --target web ./src
```

```bash
# Build for native only
npx tamagui build --target native ./src
```

```bash
# Build a specific file
npx tamagui build ./src/components/MyComponent.tsx
```

```bash
# Include/exclude patterns
npx tamagui build --include "components/**" --exclude "**/*.test.tsx" ./src
```

```bash
# Verify minimum optimizations (useful in CI)
npx tamagui build --target web --expect-optimizations 10 ./src
```

--------------------------------

### Installation

Source: https://context7_llms

Instructions for installing the Popover and PortalProvider packages.

```APIDOC
## Installation

Popover is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/popover
```

### PortalProvider

When rendering into root of app instead of inline, you'll first need to install the `@tamagui/portal` package:

```bash
npm install @tamagui/portal
```

Then add `PortalProvider` to the root of your app:

```tsx fileName="App.tsx"
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

<PropsTable
  data={[
    {
      name: 'shouldAddRootHost',
      type: 'boolean',
      required: false,
      description: `Defines whether to add a default root host or not.`,
    },
  ]}
/>
```

--------------------------------

### Configure Tamagui with v5 Presets (TypeScript)

Source: https://tamagui.dev/docs/core/animation-drivers

Demonstrates how to configure Tamagui using the v5 presets, which offer pre-configured animations for all four drivers. This example shows importing necessary functions and presets, and exporting the final configuration.

```tsx
import { defaultConfig } from '@tamagui/config/v5'
import { animations } from '@tamagui/config/v5-css' // or v5-motion, v5-rn, v5-reanimated
import { createTamagui } from 'tamagui'

export const config = createTamagui({
  ...defaultConfig,
  animations,
})
```

--------------------------------

### Button Usage Examples

Source: https://context7_llms

Examples demonstrating how to use the Tamagui Button component, including basic usage, sizing, and icon theming.

```APIDOC
## Button Usage

### Description

Examples demonstrating how to use the Tamagui Button component.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

None

### Request Example

```json
{
  "example": "N/A"
}
```

### Response

#### Success Response (200)

N/A (Component Usage)

#### Response Example

```json
{
  "example": "N/A"
}
```

### Basic Usage

```tsx
import { Button } from 'tamagui'

export default () => <Button>Lorem ipsum</Button>
```

### Sizing

Sizing buttons provides a unique challenge especially for a compiler, because you need to adjust many different properties - not just on the outer frame, but on the text wrapped inside. Tamagui supports adjusting the padding, border radius, font size and icons sizes all in one with the `size` prop.

```tsx
import { Button } from 'tamagui'

export default () => <Button size="$6">Lorem ipsum</Button>
```

Given your theme defines a size `6`, the button will adjust all of the properties appropriately. You can also pass a plain number to get an arbitrary size.

### Icon Theming

You can pass icons as either elements or components. If passing components, Tamagui will automatically pass the `size` and `color` prop to them based on your theme.

You can [use the source of Button itself](https://github.com/tamagui/tamagui/blob/v2/code/ui/button/src/Button.tsx) to see in more detail what variants you can override, and how we use this pattern internally to create our Button component.
```

--------------------------------

### Install Tamagui Portal for Standalone Dialog

Source: https://tamagui.dev/docs/components/dialog

If using `@tamagui/dialog` independently without the main `tamagui` package, you must also install `@tamagui/portal`. This is necessary for managing the modal's rendering context.

```bash
yarn add @tamagui/portal
npm install @tamagui/portal
bun add @tamagui/portal
pnpm add @tamagui/portal
```

--------------------------------

### useToastState Example (TypeScript)

Source: https://tamagui.dev/docs/components/toast

A TypeScript code example demonstrating the usage of the `useToastState` hook to get the current toast state.

```tsx
const {
  toast
} = useToastState()
```

--------------------------------

### Install Next.js Theme Package

Source: https://tamagui.dev/docs/guides/next-js

Command to install the @tamagui/next-theme package, which provides SSR light/dark theme support for Next.js applications.

```bash
yarn add @tamagui/next-theme
```

--------------------------------

### Select Installation (Bash)

Source: https://context7_llms

Provides the command to install the Tamagui Select component independently using npm.

```bash
npm install @tamagui/select
```

--------------------------------

### Setup Native LinearGradient with Expo

Source: https://context7_llms

Integrates `expo-linear-gradient` for high-performance native gradient rendering. Requires installing the package and importing the setup module.

```bash
npm install expo-linear-gradient
```

```tsx
// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-expo-linear-gradient'
```

--------------------------------

### Install Portal Package for Root Rendering

Source: https://context7_llms

Instructions for installing the Portal package, which is necessary when rendering Popovers into the root of the application instead of inline. This enables global positioning and management of the Popover content.

```bash
npm install @tamagui/portal
```

--------------------------------

### Configure Multiple Animation Drivers (TSX)

Source: https://tamagui.dev/docs/core/animation-drivers

This example demonstrates configuring multiple animation drivers, 'createCSS' and 'createSpring', at the root level of the Tamagui configuration. It shows how to import different animation packages and combine them. This allows for selecting different animation drivers on a per-component basis using the 'animatedBy' prop.

```tsx
import { createAnimations as createCSS } from '@tamagui/animations-css'
import { createAnimations as createSpring } from '@tamagui/animations-motion'

export default createTamagui({
  animations: {
    default: createSpring(),
    lazy: createCSS()
  }
})
```

--------------------------------

### Install Tamagui CLI (Bash)

Source: https://tamagui.dev/docs/guides/next-js

Installs the Tamagui CLI as a development dependency using Yarn. This command is essential for optimizing Tamagui builds in production environments. Ensure you have Yarn installed or adapt the command for npm or pnpm.

```bash
yarn add -D @tamagui/cli

```

--------------------------------

### PortalProvider Installation

Source: https://tamagui.dev/ui/popover/1.83.0

Instructions for installing and using the PortalProvider when rendering popovers into the root of the app.

```APIDOC
## PortalProvider Installation

### Description
When rendering into root of app instead of inline, you'll first need to install the `@tamagui/portal` package.

### Installation

```bash
# Using Yarn
yarn add @tamagui/portal

# Using npm
npm install @tamagui/portal

# Using Bun
bun add @tamagui/portal

# Using pnpm
pnpm add @tamagui/portal
```

### Usage

Then add `PortalProvider` to the root of your app:

```tsx
// App.tsx
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

### Props

#### shouldAddRootHost
- **type**: boolean
- **description**: Defines whether to add a default root host or not.
```

--------------------------------

### Install @tamagui/next-plugin with Yarn

Source: https://tamagui.dev/docs/guides/next-js

This command installs the optional Tamagui plugin for Next.js projects that do not use Turbopack. This plugin helps streamline certain configuration settings.

```bash
yarn add @tamagui/next-plugin

```

--------------------------------

### Installing Tamagui Group Package

Source: https://context7_llms

Provides the command to install the Tamagui Group package independently using npm. This is useful if you are not using the full Tamagui monorepo setup.

```bash
npm install @tamagui/group
```

--------------------------------

### Native Portal Setup

Source: https://context7_llms

Instructions for setting up native portals using react-native-teleport to preserve React context.

```APIDOC
## Native Portal Setup (Recommended)

### Step 1: Install react-native-teleport

```bash
npm install react-native-teleport
```

### Step 2: Import the setup module

In your app's entry file (index.js or App.tsx), before any Tamagui imports:

```tsx
import '@tamagui/native/setup-teleport'
```

This setup ensures that React context is automatically preserved for portaled content on native platforms.
```

--------------------------------

### Tamagui Button Component Example (JSX)

Source: https://tamagui.dev/docs/intro/compiler-install

A basic example of the Tamagui Button component. This snippet is incomplete but shows the start of a Button tag, implying its usage for interactive elements.

```jsx
<Button
```

--------------------------------

### Install Tamagui Full UI Kit

Source: https://tamagui.dev/docs/intro/installation

Installs the complete Tamagui package, which includes the core styling library and the full UI component kit. This is recommended for most projects wanting to leverage Tamagui's pre-built components.

```bash
yarn add tamagui
```

```bash
npm install tamagui
```

```bash
bun add tamagui
```

```bash
pnpm add tamagui
```

--------------------------------

### Tamagui Configuration File Example (TypeScript)

Source: https://tamagui.dev/docs/guides/next-js

This is an example of a Tamagui configuration file written in TypeScript. It's recommended for setting up media queries and other advanced features within your Tamagui project.

```typescript
tamagui.config.ts
```

--------------------------------

### React App Setup with TamaguiProvider

Source: https://tamagui.dev/docs/core/configuration

This snippet demonstrates the basic structure of a React application's entry point, utilizing TamaguiProvider to wrap the main application content. It shows how to pass the Tamagui configuration and set a default theme.

```jsx
import { config } from '@tamagui/core'
import { AppContents } from '~/app/AppContents'
import { TamaguiProvider } from 'tamagui'

export default function App() {
  return (
    <TamaguiProvider config={config} defaultTheme="light">
      <AppContents />
    </TamaguiProvider>
  )
}
```

--------------------------------

### Setup Native Portals with react-native-teleport

Source: https://context7_llms

Sets up native portals to preserve React context in components like Sheet and Dialog. Requires installing `react-native-teleport` and importing the setup module at the app's entry point.

```bash
npm install react-native-teleport
```

```tsx
// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-teleport'
```

--------------------------------

### Setup Gesture Handler for Tamagui Sheet (TSX)

Source: https://tamagui.dev/docs/components/sheet

This snippet demonstrates the basic setup for the Tamagui Sheet component, ensuring it utilizes the native gesture handler for improved performance. It requires the 'react-native-gesture-handler' library to be installed and configured.

```tsx
import { Sheet } from 'tamagui';

// ... other imports and component setup

<Sheet>
  <Sheet.Handle />
  <Sheet.Frame>
    {/* Content inside the sheet */}
  </Sheet.Frame>
</Sheet>
```

--------------------------------

### Accordion Examples

Source: https://context7_llms

Examples demonstrating how to use the Accordion component with different configurations.

```APIDOC
## Accordion Examples

### Expanded by default
Use the `defaultValue` prop to define the open item by default.

```jsx
<Accordion type="single" defaultValue="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>
```

### Allow collapsing all items
Use the `collapsible` prop to allow all items to close.

```jsx
<Accordion type="single" collapsible>
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>
```

### Multiple items open at the same time
Set the `type` prop to `multiple` to enable opening multiple items at once.

```jsx
<Accordion type="multiple">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion>
```
```

--------------------------------

### Tamagui Build Configuration Example

Source: https://tamagui.dev/docs/guides/cli

An example of a `package.json` script configuration for building the Tamagui project. This JSON snippet defines a 'build' script that executes Tamagui's build process for the web target, followed by a Next.js build.

```json
{
  "scripts": {
    "build": "tamagui build --target web ./src && next build"
  }
}
```

--------------------------------

### Configure Tamagui Metro Plugin with Inline Options

Source: https://tamagui.dev/docs/guides/metro

This example demonstrates how to configure the Tamagui Metro plugin by passing options directly within the `withTamagui` function. It still requires importing `getDefaultConfig` and `withTamagui`. The `getDefaultConfig` function is used to get the base configuration, which is then extended with custom inline options provided as an object to `withTamagui`.

```tsx
const { getDefaultConfig } = require('@expo/metro-config');
const { withTamagui } = require('@tamagui/metro-plugin');

const config = getDefaultConfig(__dirname);

module.exports = withTamagui(config, {
  // your tamagui options here
})

```

--------------------------------

### Install Tamagui Menu Component

Source: https://context7_llms

Installs the Tamagui Menu component. For native menu functionality on iOS and Android, additional dependencies like `@react-native-menu/menu` and platform-specific packages are required. A setup import is also necessary for Zeego integration.

```bash
yarn add @tamagui/menu
```

```bash
yarn add @react-native-menu/menu
yarn add react-native-ios-context-menu
yarn add react-native-ios-utilities
yarn add zeego
yarn add sf-symbols-typescript
```

--------------------------------

### Tamagui Configuration (v5)

Source: https://tamagui.dev/docs/guides/next-js

This TypeScript code snippet demonstrates the basic setup for Tamagui configuration using version 5. It imports `defaultConfig` and `createTamagui`, which are essential for initializing Tamagui within your Next.js application. This setup is typically placed in `tamagui.config.ts`.

```tsx
import { defaultConfig } from '@tamagui/config/v5'
import { createTamagui } from 'tamagui'

```

--------------------------------

### Install and Use PortalProvider

Source: https://context7_llms

Instructions to install the `@tamagui/portal` package and integrate `PortalProvider` into the root of your application. This is necessary when rendering components into the root instead of inline.

```bash
npm install @tamagui/portal
```

```tsx
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

--------------------------------

### Configure NextTamaguiProvider for Themes

Source: https://tamagui.dev/docs/guides/next-js

TypeScript code snippet demonstrating the setup of NextTamaguiProvider in a Next.js application to handle SSR themes.

```tsx
'use client'

import { ReactNode } from 'react'
import { NextThemeProvider, useRootTheme
```

--------------------------------

### Tamagui App Initialization and Configuration (React)

Source: https://tamagui.dev/docs/guides/next-js

This snippet demonstrates the core setup for a Tamagui application using React. It includes importing TamaguiProvider and the application's configuration, and exporting the default App component. This is crucial for integrating Tamagui's styling and theming capabilities into your React project.

```jsx
import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from '../tamagui.config'

export default function App({ Component, pageProps }: AppProps) {
  // memo to avoid re-render on dark/light change
  const contents = useMemo(() => (
    <Component {...pageProps} />
  ), [pageProps])

  return (
    <TamaguiProvider config={tamaguiConfig}>
      {contents}
    </TamaguiProvider>
  )
}
```

--------------------------------

### Fuller Example with Styling Properties (TSX)

Source: https://tamagui.dev/docs/components/stacks

An advanced example demonstrating the use of various style properties with XStack and YStack components in Tamagui. This snippet showcases how to apply layout, flex, and background color properties. It requires Tamagui to be installed.

```tsx
import { Text, XStack, YStack } from 'tamagui'

export default (() => (
  <XStack
    flex
    flexWrap='wrap'
    backgroundColor='$background'
    alignItems='center'
    justifyContent='center'
    space='$4'
    px='$4'
    py='$2'
    br='$4'
  >
    <YStack>
      <Text>Hello</Text>
    </YStack>
    <YStack>
      <Text>World</Text>
    </YStack>
  </XStack>
))
```