DOCSEARCHbyAlgolia
Submit Docs

Tamagui

website·Indexed 35 days ago

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

A UI component library featuring accessible and customizable components such as Button, Checkbox, Context Menu, Dialog, and FocusScope. The documentation covers installation, API references, anatomy, and advanced usage for components across various versions, including 2.0.0.

Tokens
143.1K
Snippets
820
Records
1.1K
Agent score
69%

What's inside Tamagui

  1. Overview of the Tamagui Optimizing Compiler

    The Tamagui compiler (@tamagui/static) is designed to solve the 'frontend trilemma' by allowing developers to share a high percentage of code between native and web platforms without sacrificing performance or the 'native feel' of the app. It achieves this by transforming high-level React components and styles into optimized platform primitives during the build process.

  2. Overview of the Tamagui CLI

    The Tamagui CLI is a suite of command-line tools used for optimizing components, managing dependencies, and adding assets like fonts and icons to Tamagui projects. While useful for project management and optimization, the CLI is not required to begin developing with Tamagui.

  3. Overview of Tamagui Core Features

    Tamagui is a UI framework for React and React Native that provides a high-performance design system. Key highlights include:

    • Lightweight Core: The core has only one dependency (React) and supports the full React Native View and Text API, a superset of the React Native Style API, and typed design system helpers (~28Kb on web).
    • Optimizing Compiler: A partial-evaluating compiler optimizes code (including inline logic) to achieve 0-runtime performance without sacrificing developer ergonomics.
    • Hybrid Execution: Features work at both runtime and compile-time, removing the typical limitations of 0-runtime libraries.
    • Efficient State Hooks: Includes useTheme and useMedia hooks featuring signal-like granularity and dirty tracking.
    • Component Flexibility: Provides both unstyled and styled versions of all components.

  4. Overview of Tamagui Motion Driver

    The Motion Driver in Tamagui utilizes the Motion library, which is built on the Web Animations API (WAAPI). It employs a hybrid engine that combines JavaScript animations with native browser APIs to provide high-performance, GPU-accelerated animations on the web.

  5. Overview of Tamagui Animations

    Tamagui allows you to animate any style prop using a configurable animation driver. The system is designed to be platform-agnostic, enabling developers to swap drivers (e.g., using lightweight CSS animations on the web and Reanimated on native) via configuration without changing the component logic. Key capabilities include:

    • Animating style props with per-prop configuration.
    • Animating across different states, including media queries and hover states.
    • SSR-safe mount animations.
    • Enter and exit animations using the AnimatePresence component.

  6. Understand the Tamagui project folder layout

    The project structure is organized into apps for entry points and packages for shared logic.

    • apps/: Contains the entry points for different platforms, such as expo and next.
    • packages/: Contains shared packages used across all apps. The primary package is app/, which houses:
      • features/: Business logic and components organized by feature (avoid using a generic screens folder).
      • provider/: App wrappers and providers, including no-ops for Web.
      • navigation/: Navigation code for React Native (used in starter-free templates).

  7. Understand Tamagui Prop Support

    Tamagui supports a superset of React Native props. When building components, you can use all standard React Native View and Text style props as a foundation. Tamagui extends this by allowing style props to be applied directly onto the component object, alongside additional non-style props provided by the Tamagui framework.

  8. Use the Tamagui Button component

    The Button component is a flexible, sizable button that extends Stack views. It supports theme inversion, integrated icons, and a unified size prop that scales padding, border radius, font size, and icon sizes simultaneously.
    import { Button } from 'tamagui'

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

  9. Use the CSS Driver for lightweight animations in Tamagui

    The @tamagui/animations-css package provides a CSS driver that works with the Tamagui compiler and runtime. It allows developers to implement lightweight, CSS transition-based animations and share typed animation definitions across all components in a project.
    npm install @tamagui/animations-css

  10. Meet the prerequisites for Tamagui 2

    Before installing or upgrading to Tamagui 2, ensure your project meets the following minimum version requirements: React 19+, React Native 0.81+ (which must have New Architecture support enabled), and TypeScript 5+.

  11. Use the Tamagui Form component for native and web

    The Form component from the @tamagui/form package provides a simple, accessible form wrapper that works consistently across both native and web platforms. It supports all standard Tamagui props for styling and layout.

  12. Use Reanimated Driver for off-thread animations

    The Reanimated Driver integrates the Reanimated library into Tamagui to enable advanced animations that run off-thread. This ensures smooth performance for spring and timing animations in React Native and React Native Web environments.