tooltip

star 0

Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler.

hk-vk By hk-vk schedule Updated 4/5/2026
play_arrow Run Skill in Manus View GitHub

name: tooltip description: Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler. metadata: source: llms.txt source_url: https://tamagui.dev/llms.txt generated: 2026-04-05T08:05:36.404Z

Tooltip

Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler.

Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler.

Available Resources

components/accordion/1.0.0

title: Accordion

description: A vertically stacked set of interactive headings with content. name: accordion component: Accordion package: accordion

Installation

Anatomy

API Reference

Examples

Accessibility

components/accordion/2.0.0

title: Accordion

description: A vertically stacked set of interactive headings with content name: accordion component: Accordion package: accordion demoName: Accordion

Installation

Anatomy

API Reference

Examples

Accessibility

components/alert-dialog/1.0.0

title: AlertDialog

description: Show an alert prompt in a dialog name: alertDialog component: AlertDialog package: alert-dialog demoName: AlertDialog

Installation

Anatomy

API Reference

Examples

components/alert-dialog/2.0.0

title: Alert Dialog

description: Show an alert prompt in a dialog name: alert-dialog component: AlertDialog package: alert-dialog demoName: AlertDialog

Installation

Anatomy

API Reference

components/anchor/1.0.0

title: Anchor

description: Link to external websites. name: html component: Anchor

Usage

API Reference

components/anchor/2.0.0

title: Anchor

description: Link to external websites name: anchor component: Anchor package: html

Installation

Usage

API Reference

components/avatar/1.0.0

title: Avatar

description: Display aspect-fixed images with a fallback while loading name: avatar component: Avatar package: avatar demoName: Avatar

Installation

Usage

API Reference

components/avatar/2.0.0

title: Avatar

description: Display aspect-ratio-fixed images with a fallback while loading name: avatar component: Avatar package: avatar demoName: Avatar

Installation

Usage

API Reference

components/button/1.0.0-alpha

title: Button

description: A simple button component name: button component: Button demoName: Button

components/button/1.0.0-beta.0

title: Button

description: A simple button component name: button component: Button demoName: Button

components/button/1.0.0

title: Button

description: A simple button component name: button component: Button package: button demoName: Button

components/button/1.28.0

title: Button

description: An incredibly flexible button. name: button component: Button package: button demoName: Button

Usage

API Reference

components/button/2.0.0

title: Button

description: A simple button component name: button component: Button package: button demoName: Button

Installation

Usage

Sizing

Variants

Icon Theming

Group Theming

Web Form Props

Text Styling

Creating Your Own Button

API Reference

components/card/1.0.0

title: Card

description: Sizable, themeable cards with a flexible API. name: card component: Card package: card demoName: Card

Installation

Anatomy

API Reference

components/card/2.0.0

title: Card

description: Sizable, themeable cards with a flexible API name: card component: Card package: card demoName: Card

Installation

Anatomy

API Reference

components/checkbox/1.3.0

title: Checkbox

description: A simple checkbox component name: checkbox component: Checkbox package: checkbox demoName: Checkbox

Installation

Usage

API Reference

components/checkbox/1.85.0

title: Checkbox

description: A simple checkbox component name: checkbox component: Checkbox package: checkbox demoName: Checkbox

Installation

Usage

API Reference

components/checkbox/1.89.0

title: Checkbox

description: Toggle state in forms. name: checkbox component: Checkbox package: checkbox demoName: Checkbox

Installation

Usage

API Reference

components/checkbox/2.0.0

title: Checkbox

description: Toggle state in forms name: checkbox component: Checkbox package: checkbox demoName: Checkbox

Installation

Usage

API Reference

components/context-menu/2.0.0

title: Context Menu

description: A menu component triggered by right-click on web and long press on touch devices name: context-menu component: ContextMenu package: context-menu demoName: ContextMenu

Installation

Anatomy

API Reference

components/dialog/1.0.0

title: Dialog

description: Show a modal with configurable layout and accessible actions. name: dialog component: Dialog package: dialog demoName: Dialog

Installation

Anatomy

API Reference

Examples

components/dialog/1.131.0

title: Dialog

description: Show a modal with configurable layout and accessible actions. name: dialog component: Dialog package: dialog demoName: Dialog

Installation

Anatomy

Scoping

Dismissal Behavior

API Reference

Examples

components/dialog/2.0.0

title: Dialog

description: Show a modal with configurable layout and accessible actions name: dialog component: Dialog package: dialog demoName: Dialog

Installation

Anatomy

Scoping

Dismissal Behavior

API Reference

components/focus-scope/1.128.0

title: FocusScope

description: Manage focus behavior within elements accessibly. name: focus-scope component: FocusScope package: focus-scope

Installation

Usage

Focus Trapping

Focus Looping

Animation-Friendly Focusing

Advanced Control with FocusScopeController

Function as Children

API Reference

Usage in Other Components

Accessibility

Examples

components/focus-scope/2.0.0

title: FocusScope

description: Manage focus behavior within elements accessibly. name: focus-scope component: FocusScope package: focus-scope

Installation

Usage

Focus Trapping

Focus Looping

Animation-Friendly Focusing

Advanced Control with FocusScopeController

Function as Children

API Reference

Usage in Other Components

Accessibility

Examples

components/form/1.3.0

title: Form

description: A simple form component for native and web. name: form component: Form package: form demoName: Form

Installation

Anatomy

API Reference

components/form/2.0.0

title: Form

description: A simple form component for native and web name: form component: Form package: form demoName: Form

Installation

Anatomy

API Reference

components/group/1.0.0

title: Group

description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group

Usage

Sizing

Disabled

Group API

components/group/1.11.2

title: Group

description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group

Usage

Sizing

Disabled

API Reference

components/group/1.56.1

title: Group

description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group

Installation

Usage

Sizing

Disabled

API Reference

components/group/1.6.0

title: Group

description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group

Usage

Sizing

Disabled

Group API

components/group/1.7.0

title: Group

description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group

Usage

Sizing

Disabled

Group API

components/group/2.0.0

title: Group

description: Render horizontal or vertical groups easily name: group component: Group package: group demoName: Group

Installation

Usage

Sizing

Separators

Disabled

Custom Components & Nested Items

API Reference

components/headings/1.0.0

title: Headings

description: Heading components that mimic HTML equivalents name: html component: Headings package: text demoName: Headings

Installation

How it works

API Reference

components/headings/2.0.0

title: Headings

description: Heading components that mirror HTML equivalents name: headings component: Headings package: text demoName: Headings

Installation

How it works

API Reference

components/html-elements/1.0.0

title: HTML Elements

description: Render semantic HTML with these elements. name: html-elements component: Layouts

Installation

HTML element props

components/html-elements/2.0.0

title: HTML Elements

description: Render semantic HTML with these elements name: html-elements component: Layouts package: elements

Installation

API Reference

components/image/1.0.0

title: Image

description: React Native Web Image + Tamagui style props. name: html component: Image package: image demoName: Image

components/image/1.13.0

title: Image

description: React Native Web Image + Tamagui style props. name: html component: Image package: image demoName: Image

Installation

Usage

API Reference

components/image/2.0.0

title: Image

description: A pure, lightweight Image component with Tamagui style props name: image component: Image package: image demoName: Image

Installation

Usage

Using with expo-image

Accessibility

API Reference

components/inputs/1.0.0

title: Input & Textarea

name: inputs description: Flexible form fields in styled and unstyled forms. component: Input demoName: Inputs

Installation

Input

TextArea

components/inputs/2.0.0

title: Input & TextArea

name: inputs description: Flexible form fields in styled and unstyled forms component: Input package: input demoName: Inputs

Installation

Input

TextArea

components/intro/1.0.0

title: Tamagui UI

Setup

components/intro/2.0.0

title: Tamagui UI

description: React Native UI kit with copy-paste composable components

Setup

components/label/1.0.0

title: Label

description: Label form elements with accessibility. name: label component: Label package: label demoName: Label

Installation

Usage

Accessibility

API Reference

components/label/2.0.0

title: Label

description: Label form elements with accessibility name: label component: Label package: label demoName: Label

Installation

Usage

Accessibility

API Reference

components/linear-gradient/1.0.0-alpha

title: Linear Gradient

description: Linear Gradient that works with Tamagui style props. name: html component: LinearGradient demoName: LinearGradient

components/linear-gradient/1.0.0

title: Linear Gradient

description: Linear gradients that work with Tamagui style props name: html component: LinearGradient demoName: LinearGradient

Installation

Usage

API Reference

components/linear-gradient/2.0.0

title: Linear Gradient

description: Linear gradients that work with Tamagui style props name: linear-gradient component: LinearGradient package: linear-gradient demoName: LinearGradient

Installation

Usage

API Reference

components/list-item/1.0.0

title: ListItem

description: A component for showing columns of items. name: list-item component: ListItem package: list-item demoName: ListItem

Installation

Usage

Sizing

Icon Theming

Customization

API Reference

components/list-item/2.0.0

title: ListItem

description: A component for displaying rows of items name: list-item component: ListItem package: list-item demoName: ListItem

Installation

Usage

Sizing

Title and SubTitle

Icon Theming

Variant

Apply (Context)

Customization

API Reference

components/lucide-icons/1.0.0

title: Lucide Icons

description: Cross-platform compatible SVG based icons demoName: LucideIcons

Installation

Usage

Credit

components/lucide-icons/2.0.0

title: Lucide Icons

description: Cross-platform compatible SVG-based icons name: lucide-icons component: LucideIcons package: lucide-icons demoName: LucideIcons

Installation

Usage

Credit

components/menu/2.0.0

title: Menu

description: A selectable list in a popover with nested submenus name: dropdown menu component: Menu package: menu

Installation

Anatomy

API Reference

Styling

components/native/2.0.0

@tamagui/native Package

Portal

Sheet Gestures

Menu & ContextMenu

Toast

LinearGradient

components/new-inputs/1.0.0

title: Input & Textarea

name: inputs component: Input demoName: Inputs

Installation

Input

TextArea

components/new-inputs/2.0.0

title: Input & TextArea

description: Single-line and multi-line text inputs with web-first API name: inputs component: Input package: input demoName: Inputs

Installation

Usage

Web-First API

Styling

Native-Only Props

Cross-Platform Text Behavior

Migration from v1

API Reference

components/popover/1.0.0

title: Popover

description: A simple popover component name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.110.0

title: Popover

description: Show content in a floating pane. name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.125.0

title: Popover

description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.128.0

title: Popover

description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.129.0

title: Popover

description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.131.0

title: Popover

description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

Scoping

API Reference

components/popover/1.43.0

title: Popover

description: A simple popover component name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/1.83.0

title: Popover

description: A simple popover component name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

API Reference

components/popover/2.0.0

title: Popover

description: Show content with a trigger in a floating pane name: popover component: Popover package: popover demoName: Popover

Installation

Anatomy

Scoping

API Reference

Utility Functions

components/portal/1.0.0

title: Portal

description: Send items to other areas of the tree. name: portal component: Portal package: portal

components/portal/2.0.0

title: Portal

description: Send items to other areas of the tree name: portal component: Portal package: portal

Native Portal Setup (Recommended)

Alternative Approaches

API Reference

Technical Details

components/progress/1.0.0

title: Progress

description: Display a bar to indicate percent completion. name: progress component: Progress package: progress demoName: Progress

Installation

Usage

API Reference

components/progress/1.48.0

title: Progress

description: Show percent completion with a progress bar. name: progress component: Progress package: progress demoName: Progress

Installation

Usage

API Reference

components/progress/2.0.0

title: Progress

description: Show percent completion with a progress bar name: progress component: Progress package: progress demoName: Progress

Installation

Usage

API Reference

components/radio-group/1.2.0

title: RadioGroup

description: A group of radio buttons name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup

Installation

Usage

API Reference

API Reference

components/radio-group/1.3.0

title: RadioGroup

description: Use in a form to allow selecting one option from multiple. name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup

Installation

Usage

API Reference

components/radio-group/2.0.0

title: RadioGroup

description: Use in a form to allow selecting one option from multiple name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup

Installation

Usage

API Reference

components/roving-focus/2.0.0

title: RovingFocusGroup

description: Manage keyboard navigation within a group of focusable elements. name: roving-focus component: RovingFocusGroup package: roving-focus

Installation

Usage

How It Works

Orientation

Looping Navigation

Controlled Tab Stop

Non-Focusable Items

Entry Focus Control

API Reference

Keyboard Navigation

Usage in Components

  • Tabs

    • URL: /docs/components/tabs

  • RadioGroup

    • URL: /docs/components/radio-group

  • ToggleGroup

    • URL: /docs/components/toggle-group

components/scroll-view/1.0.0

title: ScrollView

description: React Native ScrollView with Tamagui props. name: scrollView component: ScrollView package: scroll-view demoName: ScrollView

Installation

Usage

API Reference

components/scroll-view/2.0.0

title: ScrollView

description: React Native ScrollView with Tamagui props name: scrollView component: ScrollView package: scroll-view demoName: ScrollView

Installation

Usage

API Reference

components/select/1.0.0

title: Select

description: A simple select component name: select component: Select package: select demoName: Select

components/select/1.128.0

title: Select

description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select

Installation

Anatomy

API Reference

components/select/1.141.0

title: Select

description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select

Installation

Anatomy

Server-Side Rendering (SSR)

API Reference

components/select/1.19.0

title: Select

description: A simple select component name: select component: Select package: select demoName: Select

Anatomy

API Reference

components/select/1.40.0

title: Select

description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select

Installation

Anatomy

API Reference

components/select/2.0.0

title: Select

description: Show a menu of items that users can select from name: select component: Select package: select demoName: Select

Installation

Anatomy

API Reference

Performance

components/separator/1.0.0

title: Separator

description: Create borders between components. name: separator component: Separator package: separator demoName: Separator

Installation

Usage

API Reference

components/separator/2.0.0

title: Separator

description: Create borders between components name: separator component: Separator package: separator demoName: Separator

Installation

Usage

API Reference

components/shapes/1.0.0

title: Shapes

description: Easy to use Square and Circle. name: shapes component: Square package: shapes demoName: Shapes

Installation

Usage

API Reference

components/shapes/2.0.0

title: Shapes

description: Easy to use Square and Circle name: shapes component: Square package: shapes demoName: Shapes

Installation

Usage

API Reference

components/sheet/1.0.0

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

components/sheet/1.116.0

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

Installation

Anatomy

Snap points

Unstyled

Headless with createSheet

Native support

API Reference

Notes

components/sheet/1.123.18

title: Sheet

description: A bottom sheet that animates. name: sheet component: Sheet package: sheet demoName: Sheet

Installation

components/sheet/1.130.0

title: Sheet

description: A bottom sheet that animates. name: sheet component: Sheet package: sheet demoName: Sheet

Installation

components/sheet/1.21.0

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

components/sheet/1.27.0

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

Installation

Anatomy

Unstyled

Headless with createSheet

Native support

API Reference

Notes

components/sheet/1.59.0

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

Installation

Anatomy

Snap points

Unstyled

Headless with createSheet

Native support

API Reference

Notes

components/sheet/1.9.18

title: Sheet

description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet

components/sheet/2.0.0

title: Sheet

description: A bottom sheet that animates name: sheet component: Sheet package: sheet demoName: Sheet

Installation

Anatomy

API Reference

Native Gesture Handler Integration

Notes

Native Support

components/slider/1.0.0

title: Slider

description: A simple slider component name: slider component: Slider package: slider demoName: Slider

Installation

Usage

API Reference

components/slider/1.45.0

title: Slider

description: Drag to set values, vertically or horizontally. name: slider component: Slider package: slider demoName: Slider

Installation

Usage

API Reference

components/slider/2.0.0

title: Slider

description: Drag to set values, vertically or horizontally name: slider component: Slider package: slider demoName: Slider

Installation

Usage

Vertical Slider on iOS

API Reference

components/spinner/1.0.0

title: Spinner

description: Render a loading indicator. name: spinner component: Spinner demoName: Spinner

Installation

API Reference

components/spinner/2.0.0

title: Spinner

description: Render a loading indicator name: spinner component: Spinner package: spinner demoName: Spinner

Installation

Usage

API Reference

components/stacks/1.0.0

Installation

API Reference

components/stacks/2.0.0

Installation

Usage

API Reference

components/switch/1.0.0

title: Switch

description: A simple switch component name: switch component: Switch package: switch demoName: Switch

components/switch/1.28.0

title: Switch

description: A simple switch component name: switch component: Switch package: switch demoName: Switch

Installation

Usage

API Reference

components/switch/1.58.0

title: Switch

description: A simple switch component name: switch component: Switch package: switch demoName: Switch

Installation

Usage

Headless with createSwitch

API Reference

components/switch/1.89.0

title: Switch

description: A toggle between two states. name: switch component: Switch package: switch demoName: Switch

Installation

Usage

API Reference

components/switch/2.0.0

title: Switch

description: A toggle between two states name: switch component: Switch package: switch demoName: Switch

Installation

Usage

API Reference

components/tabs/1.125.35

title: Tabs

description: Use in pages to manage sub-pages. name: tabs component: Tabs package: tabs demoName: Tabs

Installation

Usage

API Reference

Examples

components/tabs/1.7.0

title: Tabs

description: Use in pages to manage sub-pages. name: tabs component: Tabs package: tabs demoName: Tabs

Usage

API Reference

Examples

components/tabs/2.0.0

title: Tabs

description: Use in pages to manage sub-pages name: tabs component: Tabs package: tabs demoName: Tabs

Installation

Usage

API Reference

Examples

components/tamagui-image/1.0.0

title: Image

description: Web compatible and super light image component with Tamagui style props. name: html component: Image package: image-next demoName: WebNativeImageDemo

Installation

Usage

API Reference

components/tamagui-image/2.0.0

title: Image

description: Web compatible and super light image component with Tamagui style props name: tamagui-image component: Image package: image demoName: WebNativeImageDemo

Installation

Usage

API Reference

components/text/1.0.0-alpha

title: Text

description: Text, Sized Text and Paragraph show one way to build a design system. name: text component: Paragraph demoName: Text

SizableText

Paragraph

components/text/1.0.0

title: Text

description: Text primitives with themes custom to each font. name: text component: Paragraph package: text demoName: Text

Installation

Usage

Text

SizableText

Paragraph

components/text/2.0.0

title: Text

description: Text primitives with themes custom to each font name: text component: Paragraph package: text demoName: Text

Installation

Usage

Text

SizableText

Paragraph

Inline Text Elements

Text Truncation

API Reference

components/toast/1.11.3

title: Toast

description: A toast component with native features name: toast component: Toast package: toast demoName: Toast

Installation

Usage

API

FAQ

components/toast/1.13.0

title: Toast

description: A toast component with native features name: toast component: Toast package: toast demoName: Toast

Installation

Usage

API

FAQ

components/toast/1.15.15

title: Toast

description: A toast component with native features name: toast component: Toast package: toast demoName: Toast

Installation

Anatomy

API Reference

Examples

components/toast/1.8.0

title: Toast

description: A toast component with native features name: toast component: Toast package: toast demoName: Toast

Install

Anatomy

Usage

API

components/toast/1.83.0

title: Toast

description: Use to show feedback to user interactions. name: toast component: Toast package: toast demoName: Toast

Installation

Anatomy

API Reference

Examples

components/toast/1.9.1

title: Toast

description: A toast component with native features name: toast component: Toast package: toast demoName: Toast

Usage

API

FAQ

components/toast/2.0.0

title: Toast

description: Use to show feedback to user interactions. name: toast component: Toast package: toast demoName: ToastV1

Installation

Anatomy

API Reference

Examples

components/toast-2/2.0.0

title: Toast v2

description: Beautiful, accessible toasts with smooth animations and gesture support. name: toast-2 component: Toast package: toast demoName: Toast

Installation

Quick Start

Anatomy

API

Features

Toaster (All-in-One)

components/toggle-group/1.10.0

title: ToggleGroup

description: Two-state buttons that can be toggled on or off. name: toggleGroup component: ToggleGroup package: toggle-group demoName: ToggleGroup

Installation

Usage

API Reference

components/toggle-group/2.0.0

title: ToggleGroup

description: Two-state buttons that can be toggled on or off name: toggleGroup component: ToggleGroup package: toggle-group demoName: ToggleGroup

Installation

Usage

API Reference

components/tooltip/1.0.0

title: Tooltip

description: A simple tooltip component name: tooltip component: Tooltip package: tooltip demoName: Tooltip

Installation

Anatomy

API Reference

components/tooltip/1.105.0

title: Tooltip

description: A simple tooltip component name: tooltip component: Tooltip package: tooltip demoName: Tooltip

Installation

Anatomy

API Reference

components/tooltip/1.122.0

title: Tooltip

description: A tooltip on web, with only accessibility output on native. name: tooltip component: Tooltip package: tooltip demoName: Tooltip

Installation

Anatomy

API Reference

components/tooltip/2.0.0

title: Tooltip

description: A tooltip on web, with only accessibility output on native name: tooltip component: Tooltip package: tooltip demoName: Tooltip

Installation

Anatomy

API Reference

Scoping

components/unspaced/1.0.0

title: Unspaced

description: Avoids spacing for children inside a spacing container. name: html component: Unspaced

components/unspaced/2.0.0

title: Unspaced

description: Avoids spacing for children inside a spacing container name: unspaced component: Unspaced package: core

Usage

components/visually-hidden/1.0.0

title: Visually Hidden

description: Hide content accessibly. name: html component: VisuallyHidden

Installation

Usage

components/visually-hidden/2.0.0

title: Visually Hidden

description: Hide content accessibly name: visually-hidden component: VisuallyHidden package: visually-hidden

Installation

Usage

components/z-index/2.0.0

title: Z-Index & Stacking

description: How Tamagui automatically stacks overlays and floating content name: z-index

How It Works

When to Set zIndex

Component Defaults

Stacking Hierarchy

Nested Stacking

Technical Details

Portal Component

core/animate-presence

title: AnimatePresence

description: Animate components as they mount and unmount

Basic Usage

Enter/Exit Transitions

The custom prop

API Reference

See Also

  • Animations Overview

    • URL: /docs/core/animations

  • Animation Drivers

    • URL: /docs/core/animation-drivers

core/animation-drivers

title: Animation Drivers

description: Choose and configure animation drivers for your platform

Using Config v5

CSS Driver

React Native Driver

Reanimated Driver

Motion Driver

Swapping Drivers

See Also

  • Animations Overview

    • URL: /docs/core/animations

  • AnimatePresence

    • URL: /docs/core/animate-presence

  • Config v5

    • URL: /docs/core/config-v5#choosing-an-animation-driver

core/animations-css

title: CSS Driver

description: Lightweight CSS transition-based animations

Installation

Configuration

How it Works

Animation Configuration

When to Use

Example

See Also

  • Animations Introduction

    • URL: /docs/core/animations

  • React Native Driver

    • URL: /docs/core/animations-react-native

  • Motion Driver

    • URL: /docs/core/animations-motion

  • Reanimated Driver

    • URL: /docs/core/animations-reanimated

core/animations-motion

title: Motion Driver

description: High-performance web animations with WAAPI

Installation

Configuration

How it Works

Animation Configuration

Highlights

Platform-Specific Configuration

See Also

  • Animations Introduction

    • URL: /docs/core/animations

  • CSS Driver

    • URL: /docs/core/animations-css

  • React Native Driver

    • URL: /docs/core/animations-react-native

  • Reanimated Driver

    • URL: /docs/core/animations-reanimated

  • Motion Documentation

core/animations-react-native

title: React Native Driver

description: Spring-based animations using React Native Animated

Installation

Configuration

Animation Configuration

When to Use

Platform-Specific Configuration

Example

See Also

  • Animations Introduction

    • URL: /docs/core/animations

  • CSS Driver

    • URL: /docs/core/animations-css

  • Motion Driver

    • URL: /docs/core/animations-motion

  • Reanimated Driver

    • URL: /docs/core/animations-reanimated

core/animations-reanimated

title: Reanimated Driver

description: Advanced off-thread animations with Reanimated

Installation

Configuration

How it Works

Animation Configuration

When to Use

Platform-Specific Configuration

Example

Zero Re-renders

Advanced Features

See Also

  • Animations Introduction

    • URL: /docs/core/animations

  • CSS Driver

    • URL: /docs/core/animations-css

  • React Native Driver

    • URL: /docs/core/animations-react-native

  • Motion Driver

    • URL: /docs/core/animations-motion

  • Reanimated Documentation

core/animations

title: Animations

description: Swap out animation drivers per-platform or at runtime

Installation

Usage

What to know when animating

See Also

  • AnimatePresence

    • URL: /docs/core/animate-presence

  • Animation Drivers

    • URL: /docs/core/animation-drivers

core/config-v4

title: Quick Config

description: Easy config and themes with @tamagui/config/v4

  • theme-builder guide
    • URL: /docs/guides/theme-builder#customizing-themes-with-gettheme

core/config-v5

title: 'Config v5'

description: Modern config and themes with @tamagui/config/v5

  • Choosing an Animation Driver
    • URL: #choosing-an-animation-driver

Choosing an Animation Driver

Customizing Themes with createV5Theme

Theme Values

Color Themes

Templates

Component Themes

Settings

Media Queries

Shorthands

Tree Shaking Themes

Summary: v4 to v5 Migration Checklist

core/configuration

title: Configuration

description: Set up media queries, tokens, themes, and more.

In more detail

  • animations: Configurable animation drivers.

    • URL: #animations

  • media: Cross-platform, typed

    • URL: #media

  • themes: Define themes to style contextually

    • URL: #themes

  • tokens: Your base tokens are much like static CSS variables.

    • URL: #tokens

  • settings: Many options for strictness and style behavior.

    • URL: #settings

  • shorthands: Define shorter names for any style property.

    • URL: #shorthands

TamaguiProvider

Tokens

  • @tamagui/animations-css

    • URL: /docs/core/animations-css

  • @tamagui/animations-react-native

    • URL: /docs/core/animations-react-native

  • @tamagui/animations-reanimated

    • URL: /docs/core/animations-reanimated

  • @tamagui/animations-motion

    • URL: /docs/core/animations-motion

core/create-styled-context

title: createStyledContext

description: Share variant props across compound components

core/exports

title: 'Other exports'

description: Helpful functions and constants

Constants

Helpers

Hooks

Type Helpers

core/font-language

title: FontLanguage

description: Using custom fonts for each language

core/server-rendering

title: Server Rendering

description: Advanced SSR, hydration, and client-only rendering in Tamagui

How It Works

Opting Out

Configuration Component

useMedia and SSR

SSR Hooks

Best Practices

Package Reference

See Also

  • Configuration

    • URL: /docs/core/configuration

  • useMedia

    • URL: /docs/core/use-media

  • Themes

    • URL: /docs/intro/themes

core/styled

title: styled()

description: Extend and build custom and optimizable components

Variants

Using on the web

render

styleable

accept

core/theme

title: Theme

description: Change themes contextually

Usage

Defining Themes

core/tokens

title: Tokens

description: Accessing and using tokens

Getting Tokens

Using Tokens with Components

Specific Tokens

core/use-media

title: useMedia

description: Respond to different screen sizes

core/use-theme

title: useTheme

description: Creating and using theme values

Using outside of styling

Changing the theme at the hook level

core/variants

title: Variants

description: Simple typed prop styles through styled()

Why Variants?

Variants

core/view-and-text

title: View & Text

description: Your base components

guides/cli

title: Tamagui CLI

description: Command-line tools for building, checking, and managing Tamagui projects

Installation

Commands

Global Flags

Examples

Troubleshooting

guides/create-tamagui-app

title: Bootstrapping

description: Starter kits for React Native

  • Expo Router

    • URL: /docs/guides/expo

  • Takeout

    • URL: /takeout

📦 Included packages (starter-free)

🗂 Folder layout

🏁 Start the app

🆕 Add new dependencies

guides/design-systems

title: Design Systems

description: Put together your own design system.

Step 1: Create a package

Step 2: Create your design system

Step 3: Define and export components

Step 4: Set up your build

Step 5: Test it out

guides/developing

title: Developing with Tamagui

description: Tips and tricks

guides/expo

title: Expo Guide

description: How to set up Tamagui with Expo

Install

  • Metro configuration guide
    • URL: /docs/guides/metro#web-support

Loading fonts

First time starting Expo

guides/how-to-build-a-button

title: How to Build a Button

description: Learn how to create a powerful yet simple API for a button with Tamagui and compound components hero: HowToBuildAButton demoName: BuildAButton

guides/how-to-upgrade

title: Upgrading from v1 to v2

description: A comprehensive guide for migrating your Tamagui project from v1 to v2

Prerequisites

1. Update Dependencies

2. Config Migration (v4 to v5)

3. Prop Renames

4. Shadow Migration

5. Accessibility Props

6. Component API Changes

7. Removed APIs

8. Native Setup

9. Build Config

10. Quick Reference: Find-and-Replace Patterns

11. New Features Worth Knowing

Migration Checklist

guides/metro

title: Metro Guide

description: How to set up Tamagui with Metro

Basic Setup

With Metro Plugin (Recommended)

Optimized Production Builds

Debugging

guides/next-js

title: Next.js Guide

description: How to set up Tamagui with Next.js

Setup

Themes

NextThemeProvider

For Older Versions

Pages Router

App Router (Webpack)

guides/one

title: One Guide

description: How to set up Tamagui with One

Install

Configuration

Setup Tamagui Provider

Usage

Themes

Performance

Next Steps

guides/theme-builder

title: Creating Themes with Tamagui

description: Learn how to create a suite of themes for a Tamagui app demoName: ThemeBuilder

createV5Theme

createThemes

createThemeBuilder

Concepts

guides/vite

title: Vite Guide

description: How to set up Tamagui with Vite

Install

guides/webpack

title: Webpack Guide

description: How to set up Tamagui with Webpack

Usage

intro/benchmarks

title: Benchmarks

description: Performance tests and comparisons

React Native

Web

intro/colors

title: Colors

description: Color palettes and customization options

intro/compiler-install

title: Tamagui Compiler

description: Adding the compiler to your apps

Configuration with tamagui.build.ts

Install

  • above
    • URL: #configuration-with-tamaguibuildts

Props

intro/errors

title: Errors

description: Common error messages and how to resolve them

intro/installation

title: Installation

description: Get Tamagui set up, step by step

Requirements

Installation

Next Steps

  • CLI

    • URL: /docs/guides/cli

  • Bundler Setup

    • URL: /docs/guides/next-js

  • Design Systems

    • URL: /docs/guides/design-systems

Bundler Guides

intro/introduction

title: Introduction

Community

Credits

intro/props

title: Tamagui Props

description: All the base props

Event Props

Other Props

Event Handlers

intro/static

title: Static Optimization

description: How @tamagui/static works to speed up code

  • The Frontend Trilemma

    • URL: /docs/intro/why-a-compiler

  • Compiler Installation

    • URL: /docs/intro/compiler-install

  • Benchmarks

    • URL: /docs/intro/benchmarks

intro/styles

title: Styling

description: Tamagui accepts a superset of React Native styles

Pseudo States

rem Units

CSS Shorthand with Variables

Parent based styling

Order is important

intro/themes

title: Themes

description: Create themes and sub-themes

Full Example

Ensuring valid types

Dynamic Themes

intro/tokens

title: Tokens

description: Understanding the default Tamagui token scale

intro/why-a-compiler

title: The Frontend Trilemma

description: Why Tamagui uses an optimizing compiler

Additional Resources (Optional)

title: Native UI

description: Optional native integrations for better performance and UX name: native

title: Stacks

description: An optional base for creating flex-based layouts. name: stacks component: Stacks package: stacks demoName: Stacks

title: Stacks

description: An optional base for creating flex-based layouts name: stacks component: Stacks package: stacks demoName: Stacks

How to Use This Skill

Reference these resources when working with Tooltip.

Install via CLI
npx skills add https://github.com/hk-vk/skills --skill tooltip
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator
hk-vk
hk-vk Explore all skills →