llms.txt components/accordion/1.0.0
title: Accordion
description: A vertically stacked set of interactive headings with content.
name: accordion
component: Accordion
package: accordion
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
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
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
title: Anchor
description: Link to external websites.
name: html
component: Anchor
title: Anchor
description: Link to external websites
name: anchor
component: Anchor
package: html
title: Avatar
description: Display aspect-fixed images with a fallback while loading
name: avatar
component: Avatar
package: avatar
demoName: Avatar
title: Avatar
description: Display aspect-ratio-fixed images with a fallback while loading
name: avatar
component: Avatar
package: avatar
demoName: Avatar
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
title: Button
description: A simple button component
name: button
component: Button
package: button
demoName: Button
title: Button
description: An incredibly flexible button.
name: button
component: Button
package: button
demoName: Button
title: Button
description: A simple button component
name: button
component: Button
package: button
demoName: Button
title: Card
description: Sizable, themeable cards with a flexible API.
name: card
component: Card
package: card
demoName: Card
title: Card
description: Sizable, themeable cards with a flexible API
name: card
component: Card
package: card
demoName: Card
components/checkbox/1.3.0
title: Checkbox
description: A simple checkbox component
name: checkbox
component: Checkbox
package: checkbox
demoName: Checkbox
components/checkbox/1.85.0
title: Checkbox
description: A simple checkbox component
name: checkbox
component: Checkbox
package: checkbox
demoName: Checkbox
components/checkbox/1.89.0
title: Checkbox
description: Toggle state in forms.
name: checkbox
component: Checkbox
package: checkbox
demoName: Checkbox
components/checkbox/2.0.0
title: Checkbox
description: Toggle state in forms
name: checkbox
component: Checkbox
package: checkbox
demoName: Checkbox
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
title: Dialog
description: Show a modal with configurable layout and accessible actions.
name: dialog
component: Dialog
package: dialog
demoName: Dialog
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
title: Dialog
description: Show a modal with configurable layout and accessible actions
name: dialog
component: Dialog
package: dialog
demoName: Dialog
components/focus-scope/1.128.0
title: FocusScope
description: Manage focus behavior within elements accessibly.
name: focus-scope
component: FocusScope
package: focus-scope
Animation-Friendly Focusing
Advanced Control with FocusScopeController
Usage in Other Components
components/focus-scope/2.0.0
title: FocusScope
description: Manage focus behavior within elements accessibly.
name: focus-scope
component: FocusScope
package: focus-scope
Animation-Friendly Focusing
Advanced Control with FocusScopeController
Usage in Other Components
title: Form
description: A simple form component for native and web.
name: form
component: Form
package: form
demoName: Form
title: Form
description: A simple form component for native and web
name: form
component: Form
package: form
demoName: Form
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
title: Group
description: Render horizontal or vertical groups easily
name: group
component: Group
package: group
demoName: Group
Custom Components & Nested Items
components/headings/1.0.0
title: Headings
description: Heading components that mimic HTML equivalents
name: html
component: Headings
package: text
demoName: Headings
components/headings/2.0.0
title: Headings
description: Heading components that mirror HTML equivalents
name: headings
component: Headings
package: text
demoName: Headings
components/html-elements/1.0.0
title: HTML Elements
description: Render semantic HTML with these elements.
name: html-elements
component: Layouts
components/html-elements/2.0.0
title: HTML Elements
description: Render semantic HTML with these elements
name: html-elements
component: Layouts
package: elements
title: Image
description: React Native Web Image + Tamagui style props.
name: html
component: Image
package: image
demoName: Image
title: Image
description: React Native Web Image + Tamagui style props.
name: html
component: Image
package: image
demoName: Image
title: Image
description: A pure, lightweight Image component with Tamagui style props
name: image
component: Image
package: image
demoName: Image
title: Input & Textarea
name: inputs
description: Flexible form fields in styled and unstyled forms.
component: Input
demoName: Inputs
title: Input & TextArea
name: inputs
description: Flexible form fields in styled and unstyled forms
component: Input
package: input
demoName: Inputs
title: Tamagui UI
description: React Native UI kit with copy-paste composable components
title: Label
description: Label form elements with accessibility.
name: label
component: Label
package: label
demoName: Label
title: Label
description: Label form elements with accessibility
name: label
component: Label
package: label
demoName: Label
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
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
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
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
components/lucide-icons/1.0.0
title: Lucide Icons
description: Cross-platform compatible SVG based icons
demoName: LucideIcons
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
title: Menu
description: A selectable list in a popover with nested submenus
name: dropdown menu
component: Menu
package: menu
title: Native UI
description: Optional native integrations for better performance and UX
name: native
components/new-inputs/1.0.0
title: Input & Textarea
name: inputs
component: Input
demoName: Inputs
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
Cross-Platform Text Behavior
title: Popover
description: A simple popover component
name: popover
component: Popover
package: popover
demoName: Popover
components/popover/1.110.0
title: Popover
description: Show content in a floating pane.
name: popover
component: Popover
package: popover
demoName: Popover
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
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
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
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
components/popover/1.43.0
title: Popover
description: A simple popover component
name: popover
component: Popover
package: popover
demoName: Popover
components/popover/1.83.0
title: Popover
description: A simple popover component
name: popover
component: Popover
package: popover
demoName: Popover
title: Popover
description: Show content with a trigger in a floating pane
name: popover
component: Popover
package: popover
demoName: Popover
title: Portal
description: Send items to other areas of the tree.
name: portal
component: Portal
package: portal
title: Portal
description: Send items to other areas of the tree
name: portal
component: Portal
package: portal
Native Portal Setup (Recommended)
components/progress/1.0.0
title: Progress
description: Display a bar to indicate percent completion.
name: progress
component: Progress
package: progress
demoName: Progress
components/progress/1.48.0
title: Progress
description: Show percent completion with a progress bar.
name: progress
component: Progress
package: progress
demoName: Progress
components/progress/2.0.0
title: Progress
description: Show percent completion with a progress bar
name: progress
component: Progress
package: progress
demoName: Progress
components/radio-group/1.2.0
title: RadioGroup
description: A group of radio buttons
name: radio-group
component: RadioGroup
package: radio-group
demoName: RadioGroup
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
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
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
Usage in Components
Tabs RadioGroup ToggleGroup components/scroll-view/1.0.0
title: ScrollView
description: React Native ScrollView with Tamagui props.
name: scrollView
component: ScrollView
package: scroll-view
demoName: ScrollView
components/scroll-view/2.0.0
title: ScrollView
description: React Native ScrollView with Tamagui props
name: scrollView
component: ScrollView
package: scroll-view
demoName: ScrollView
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
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
Server-Side Rendering (SSR)
title: Select
description: A simple select component
name: select
component: Select
package: select
demoName: Select
title: Select
description: Show a menu of items that users can select from.
name: select
component: Select
package: select
demoName: Select
title: Select
description: Show a menu of items that users can select from
name: select
component: Select
package: select
demoName: Select
components/separator/1.0.0
title: Separator
description: Create borders between components.
name: separator
component: Separator
package: separator
demoName: Separator
components/separator/2.0.0
title: Separator
description: Create borders between components
name: separator
component: Separator
package: separator
demoName: Separator
title: Shapes
description: Easy to use Square and Circle.
name: shapes
component: Square
package: shapes
demoName: Shapes
title: Shapes
description: Easy to use Square and Circle
name: shapes
component: Square
package: shapes
demoName: Shapes
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
Headless with createSheet
components/sheet/1.123.18
title: Sheet
description: A bottom sheet that animates.
name: sheet
component: Sheet
package: sheet
demoName: Sheet
title: Sheet
description: A bottom sheet that animates.
name: sheet
component: Sheet
package: sheet
demoName: Sheet
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
Headless with createSheet
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
Headless with createSheet
title: Sheet
description: A simple sheet component
name: sheet
component: Sheet
package: sheet
demoName: Sheet
title: Sheet
description: A bottom sheet that animates
name: sheet
component: Sheet
package: sheet
demoName: Sheet
Native Gesture Handler Integration
title: Slider
description: A simple slider component
name: slider
component: Slider
package: slider
demoName: Slider
title: Slider
description: Drag to set values, vertically or horizontally.
name: slider
component: Slider
package: slider
demoName: Slider
title: Slider
description: Drag to set values, vertically or horizontally
name: slider
component: Slider
package: slider
demoName: Slider
title: Spinner
description: Render a loading indicator.
name: spinner
component: Spinner
demoName: Spinner
title: Spinner
description: Render a loading indicator
name: spinner
component: Spinner
package: spinner
demoName: Spinner
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
title: Switch
description: A simple switch component
name: switch
component: Switch
package: switch
demoName: Switch
title: Switch
description: A simple switch component
name: switch
component: Switch
package: switch
demoName: Switch
title: Switch
description: A simple switch component
name: switch
component: Switch
package: switch
demoName: Switch
Headless with createSwitch
title: Switch
description: A toggle between two states.
name: switch
component: Switch
package: switch
demoName: Switch
title: Switch
description: A toggle between two states
name: switch
component: Switch
package: switch
demoName: Switch
title: Tabs
description: Use in pages to manage sub-pages.
name: tabs
component: Tabs
package: tabs
demoName: Tabs
title: Tabs
description: Use in pages to manage sub-pages.
name: tabs
component: Tabs
package: tabs
demoName: Tabs
title: Tabs
description: Use in pages to manage sub-pages
name: tabs
component: Tabs
package: tabs
demoName: Tabs
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
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
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
title: Text
description: Text primitives with themes custom to each font.
name: text
component: Paragraph
package: text
demoName: Text
title: Text
description: Text primitives with themes custom to each font
name: text
component: Paragraph
package: text
demoName: Text
title: Toast
description: A toast component with native features
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: A toast component with native features
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: A toast component with native features
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: A toast component with native features
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: Use to show feedback to user interactions.
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: A toast component with native features
name: toast
component: Toast
package: toast
demoName: Toast
title: Toast
description: Use to show feedback to user interactions.
name: toast
component: Toast
package: toast
demoName: ToastV1
title: Toast v2
description: Beautiful, accessible toasts with smooth animations and gesture support.
name: toast-2
component: Toast
package: toast
demoName: Toast
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
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
title: Tooltip
description: A simple tooltip component
name: tooltip
component: Tooltip
package: tooltip
demoName: Tooltip
components/tooltip/1.105.0
title: Tooltip
description: A simple tooltip component
name: tooltip
component: Tooltip
package: tooltip
demoName: Tooltip
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
title: Tooltip
description: A tooltip on web, with only accessibility output on native
name: tooltip
component: Tooltip
package: tooltip
demoName: Tooltip
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
components/visually-hidden/1.0.0
title: Visually Hidden
description: Hide content accessibly.
name: html
component: VisuallyHidden
components/visually-hidden/2.0.0
title: Visually Hidden
description: Hide content accessibly
name: visually-hidden
component: VisuallyHidden
package: visually-hidden
title: Z-Index & Stacking
description: How Tamagui automatically stacks overlays and floating content
name: z-index
title: AnimatePresence
description: Animate components as they mount and unmount
See Also
Animations Overview Animation Drivers title: Animation Drivers
description: Choose and configure animation drivers for your platform
See Also
Animations Overview AnimatePresence Config v5 title: CSS Driver
description: Lightweight CSS transition-based animations
See Also
Animations Introduction React Native Driver Motion Driver Reanimated Driver title: Motion Driver
description: High-performance web animations with WAAPI
Platform-Specific Configuration
See Also
Animations Introduction CSS Driver React Native Driver Reanimated Driver Motion Documentation core/animations-react-native
title: React Native Driver
description: Spring-based animations using React Native Animated
Platform-Specific Configuration
See Also
Animations Introduction CSS Driver Motion Driver Reanimated Driver core/animations-reanimated
title: Reanimated Driver
description: Advanced off-thread animations with Reanimated
Platform-Specific Configuration
See Also
Animations Introduction CSS Driver React Native Driver Motion Driver Reanimated Documentation title: Animations
description: Swap out animation drivers per-platform or at runtime
What to know when animating
See Also
AnimatePresence Animation Drivers title: Quick Config
description: Easy config and themes with @tamagui/config/v4
theme-builder guide title: 'Config v5'
description: Modern config and themes with @tamagui/config/v5
Choosing an Animation Driver Choosing an Animation Driver
Customizing Themes with createV5Theme
Summary: v4 to v5 Migration Checklist
title: Configuration
description: Set up media queries, tokens, themes, and more.
In more detail
animations media queries themes tokens settings shorthands Tokens
@tamagui/animations-css @tamagui/animations-react-native @tamagui/animations-reanimated @tamagui/animations-motion core/create-styled-context
title: createStyledContext
description: Share variant props across compound components
title: 'Other exports'
description: Helpful functions and constants
title: FontLanguage
description: Using custom fonts for each language
title: Server Rendering
description: Advanced SSR, hydration, and client-only rendering in Tamagui
See Also
Configuration useMedia Themes title: styled()
description: Extend and build custom and optimizable components
title: Theme
description: Change themes contextually
title: Tokens
description: Accessing and using tokens
Using Tokens with Components
title: useMedia
description: Respond to different screen sizes
title: useTheme
description: Creating and using theme values
Changing the theme at the hook level
title: Variants
description: Simple typed prop styles through styled()
title: View & Text
description: Your base components
title: Tamagui CLI
description: Command-line tools for building, checking, and managing Tamagui projects
guides/create-tamagui-app
title: Bootstrapping
description: Starter kits for React Native
Expo Router Takeout 📦 Included packages (starter-free)
title: Design Systems
description: Put together your own design system.
Step 2: Create your design system
Step 3: Define and export components
Step 4: Set up your build
title: Developing with Tamagui
description: Tips and tricks
title: Expo Guide
description: How to set up Tamagui with Expo
Install
Metro configuration guide 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
title: Upgrading from v1 to v2
description: A comprehensive guide for migrating your Tamagui project from v1 to v2
2. Config Migration (v4 to v5)
10. Quick Reference: Find-and-Replace Patterns
11. New Features Worth Knowing
title: Metro Guide
description: How to set up Tamagui with Metro
With Metro Plugin (Recommended)
Optimized Production Builds
title: Next.js Guide
description: How to set up Tamagui with Next.js
title: One Guide
description: How to set up Tamagui with One
title: Creating Themes with Tamagui
description: Learn how to create a suite of themes for a Tamagui app
demoName: ThemeBuilder
title: Vite Guide
description: How to set up Tamagui with Vite
title: Webpack Guide
description: How to set up Tamagui with Webpack
title: Benchmarks
description: Performance tests and comparisons
title: Colors
description: Color palettes and customization options
title: Tamagui Compiler
description: Adding the compiler to your apps
Configuration with tamagui.build.ts
title: Errors
description: Common error messages and how to resolve them
title: Installation
description: Get Tamagui set up, step by step