# Tooltip

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

- Skill: `hk-vk/tooltip` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hk-vk/tooltip`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/tooltip/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: hk-vk (https://skillmd.com/u/hk-vk)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/hk-vk/tooltip

---


# 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**
  - URL: https://motion.dev

### 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**
  - URL: https://docs.swmansion.com/react-native-reanimated/

### 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](/docs/intro/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 s

…(truncated)