hk-vk 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
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 s
…(truncated)