Menu
Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Ansible is a radically simple IT automation platform that makes your applications and systems easier to deploy and maintain. This llms.txt indexes the official Ansible Community Documentation (latest stable). Source: https://docs.ansible.com/projects/ansible/latest/
A proposal that those interested in providing LLM-friendly content add a /llms.txt file to their site. This is a markdown file that provides brief background information and guidance, along with links to markdown files providing more detailed information.
An ultra-portable web-browser engine for games and desktop apps.
Documentation - Discord documentation and resources. Use this skill when working with Documentation - Discord or when the user mentions documentation - discord.
The official documentation for building on the Slack platform: apps, agents, workflows, and integrations. Covers the Slack CLI, Bolt frameworks (JavaScript, Python, Java), SDKs, the Web and Events APIs, Block Kit, authentication, and Slack Marketplace distribution.
Composio powers 1000+ toolkits, tool search, context management, authentication, and a sandboxed workbench to help you build AI agents that turn intent into action.
| name | tooltip |
| description | Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler. |
| metadata | {"source":"llms.txt","source_url":"https://tamagui.dev/llms.txt","generated":"2026-04-05T08:05:36.404Z"} |
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.
description: A vertically stacked set of interactive headings with content. name: accordion component: Accordion package: accordion
description: A vertically stacked set of interactive headings with content name: accordion component: Accordion package: accordion demoName: Accordion
description: Show an alert prompt in a dialog name: alertDialog component: AlertDialog package: alert-dialog demoName: AlertDialog
description: Show an alert prompt in a dialog name: alert-dialog component: AlertDialog package: alert-dialog demoName: AlertDialog
description: Link to external websites. name: html component: Anchor
description: Link to external websites name: anchor component: Anchor package: html
description: Display aspect-fixed images with a fallback while loading name: avatar component: Avatar package: avatar demoName: Avatar
description: Display aspect-ratio-fixed images with a fallback while loading name: avatar component: Avatar package: avatar demoName: Avatar
description: A simple button component name: button component: Button demoName: Button
description: A simple button component name: button component: Button demoName: Button
description: A simple button component name: button component: Button package: button demoName: Button
description: An incredibly flexible button. name: button component: Button package: button demoName: Button
description: A simple button component name: button component: Button package: button demoName: Button
description: Sizable, themeable cards with a flexible API. name: card component: Card package: card demoName: Card
description: Sizable, themeable cards with a flexible API name: card component: Card package: card demoName: Card
description: A simple checkbox component name: checkbox component: Checkbox package: checkbox demoName: Checkbox
description: A simple checkbox component name: checkbox component: Checkbox package: checkbox demoName: Checkbox
description: Toggle state in forms. name: checkbox component: Checkbox package: checkbox demoName: Checkbox
description: Toggle state in forms name: checkbox component: Checkbox package: checkbox demoName: Checkbox
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
description: Show a modal with configurable layout and accessible actions. name: dialog component: Dialog package: dialog demoName: Dialog
description: Show a modal with configurable layout and accessible actions. name: dialog component: Dialog package: dialog demoName: Dialog
description: Show a modal with configurable layout and accessible actions name: dialog component: Dialog package: dialog demoName: Dialog
description: Manage focus behavior within elements accessibly. name: focus-scope component: FocusScope package: focus-scope
description: Manage focus behavior within elements accessibly. name: focus-scope component: FocusScope package: focus-scope
description: A simple form component for native and web. name: form component: Form package: form demoName: Form
description: A simple form component for native and web name: form component: Form package: form demoName: Form
description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group
description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group
description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group
description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group
description: Render horizontal or vertical groups easily. name: group component: Group demoName: Group
description: Render horizontal or vertical groups easily name: group component: Group package: group demoName: Group
description: Heading components that mimic HTML equivalents name: html component: Headings package: text demoName: Headings
description: Heading components that mirror HTML equivalents name: headings component: Headings package: text demoName: Headings
description: Render semantic HTML with these elements. name: html-elements component: Layouts
description: Render semantic HTML with these elements name: html-elements component: Layouts package: elements
description: React Native Web Image + Tamagui style props. name: html component: Image package: image demoName: Image
description: React Native Web Image + Tamagui style props. name: html component: Image package: image demoName: Image
description: A pure, lightweight Image component with Tamagui style props name: image component: Image package: image demoName: Image
name: inputs description: Flexible form fields in styled and unstyled forms. component: Input demoName: Inputs
name: inputs description: Flexible form fields in styled and unstyled forms component: Input package: input demoName: Inputs
description: React Native UI kit with copy-paste composable components
description: Label form elements with accessibility. name: label component: Label package: label demoName: Label
description: Label form elements with accessibility name: label component: Label package: label demoName: Label
description: Linear Gradient that works with Tamagui style props. name: html component: LinearGradient demoName: LinearGradient
description: Linear gradients that work with Tamagui style props name: html component: LinearGradient demoName: LinearGradient
description: Linear gradients that work with Tamagui style props name: linear-gradient component: LinearGradient package: linear-gradient demoName: LinearGradient
description: A component for showing columns of items. name: list-item component: ListItem package: list-item demoName: ListItem
description: A component for displaying rows of items name: list-item component: ListItem package: list-item demoName: ListItem
description: Cross-platform compatible SVG based icons demoName: LucideIcons
description: Cross-platform compatible SVG-based icons name: lucide-icons component: LucideIcons package: lucide-icons demoName: LucideIcons
description: A selectable list in a popover with nested submenus name: dropdown menu component: Menu package: menu
name: inputs component: Input demoName: Inputs
description: Single-line and multi-line text inputs with web-first API name: inputs component: Input package: input demoName: Inputs
description: A simple popover component name: popover component: Popover package: popover demoName: Popover
description: Show content in a floating pane. name: popover component: Popover package: popover demoName: Popover
description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover
description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover
description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover
description: Show content with a trigger in a floating pane. name: popover component: Popover package: popover demoName: Popover
description: A simple popover component name: popover component: Popover package: popover demoName: Popover
description: A simple popover component name: popover component: Popover package: popover demoName: Popover
description: Show content with a trigger in a floating pane name: popover component: Popover package: popover demoName: Popover
description: Send items to other areas of the tree. name: portal component: Portal package: portal
description: Send items to other areas of the tree name: portal component: Portal package: portal
description: Display a bar to indicate percent completion. name: progress component: Progress package: progress demoName: Progress
description: Show percent completion with a progress bar. name: progress component: Progress package: progress demoName: Progress
description: Show percent completion with a progress bar name: progress component: Progress package: progress demoName: Progress
description: A group of radio buttons name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup
description: Use in a form to allow selecting one option from multiple. name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup
description: Use in a form to allow selecting one option from multiple name: radio-group component: RadioGroup package: radio-group demoName: RadioGroup
description: Manage keyboard navigation within a group of focusable elements. name: roving-focus component: RovingFocusGroup package: roving-focus
Tabs
RadioGroup
ToggleGroup
description: React Native ScrollView with Tamagui props. name: scrollView component: ScrollView package: scroll-view demoName: ScrollView
description: React Native ScrollView with Tamagui props name: scrollView component: ScrollView package: scroll-view demoName: ScrollView
description: A simple select component name: select component: Select package: select demoName: Select
description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select
description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select
description: A simple select component name: select component: Select package: select demoName: Select
description: Show a menu of items that users can select from. name: select component: Select package: select demoName: Select
description: Show a menu of items that users can select from name: select component: Select package: select demoName: Select
description: Create borders between components. name: separator component: Separator package: separator demoName: Separator
description: Create borders between components name: separator component: Separator package: separator demoName: Separator
description: Easy to use Square and Circle. name: shapes component: Square package: shapes demoName: Shapes
description: Easy to use Square and Circle name: shapes component: Square package: shapes demoName: Shapes
description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
createSheetdescription: A bottom sheet that animates. name: sheet component: Sheet package: sheet demoName: Sheet
description: A bottom sheet that animates. name: sheet component: Sheet package: sheet demoName: Sheet
description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
description: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
createSheetdescription: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
createSheetdescription: A simple sheet component name: sheet component: Sheet package: sheet demoName: Sheet
description: A bottom sheet that animates name: sheet component: Sheet package: sheet demoName: Sheet
description: A simple slider component name: slider component: Slider package: slider demoName: Slider
description: Drag to set values, vertically or horizontally. name: slider component: Slider package: slider demoName: Slider
description: Drag to set values, vertically or horizontally name: slider component: Slider package: slider demoName: Slider
description: Render a loading indicator. name: spinner component: Spinner demoName: Spinner
description: Render a loading indicator name: spinner component: Spinner package: spinner demoName: Spinner
description: A simple switch component name: switch component: Switch package: switch demoName: Switch
description: A simple switch component name: switch component: Switch package: switch demoName: Switch
description: A simple switch component name: switch component: Switch package: switch demoName: Switch
createSwitchdescription: A toggle between two states. name: switch component: Switch package: switch demoName: Switch
description: A toggle between two states name: switch component: Switch package: switch demoName: Switch
description: Use in pages to manage sub-pages. name: tabs component: Tabs package: tabs demoName: Tabs
description: Use in pages to manage sub-pages. name: tabs component: Tabs package: tabs demoName: Tabs
description: Use in pages to manage sub-pages name: tabs component: Tabs package: tabs demoName: Tabs
description: Web compatible and super light image component with Tamagui style props. name: html component: Image package: image-next demoName: WebNativeImageDemo
description: Web compatible and super light image component with Tamagui style props name: tamagui-image component: Image package: image demoName: WebNativeImageDemo
description: Text, Sized Text and Paragraph show one way to build a design system. name: text component: Paragraph demoName: Text
description: Text primitives with themes custom to each font. name: text component: Paragraph package: text demoName: Text
description: Text primitives with themes custom to each font name: text component: Paragraph package: text demoName: Text
description: A toast component with native features name: toast component: Toast package: toast demoName: Toast
description: A toast component with native features name: toast component: Toast package: toast demoName: Toast
description: A toast component with native features name: toast component: Toast package: toast demoName: Toast
description: A toast component with native features name: toast component: Toast package: toast demoName: Toast
description: Use to show feedback to user interactions. name: toast component: Toast package: toast demoName: Toast
description: A toast component with native features name: toast component: Toast package: toast demoName: Toast
description: Use to show feedback to user interactions. name: toast component: Toast package: toast demoName: ToastV1
description: Beautiful, accessible toasts with smooth animations and gesture support. name: toast-2 component: Toast package: toast demoName: Toast
description: Two-state buttons that can be toggled on or off. name: toggleGroup component: ToggleGroup package: toggle-group demoName: ToggleGroup
description: Two-state buttons that can be toggled on or off name: toggleGroup component: ToggleGroup package: toggle-group demoName: ToggleGroup
description: A simple tooltip component name: tooltip component: Tooltip package: tooltip demoName: Tooltip
description: A simple tooltip component name: tooltip component: Tooltip package: tooltip demoName: Tooltip
description: A tooltip on web, with only accessibility output on native. name: tooltip component: Tooltip package: tooltip demoName: Tooltip
description: A tooltip on web, with only accessibility output on native name: tooltip component: Tooltip package: tooltip demoName: Tooltip
description: Avoids spacing for children inside a spacing container. name: html component: Unspaced
description: Avoids spacing for children inside a spacing container name: unspaced component: Unspaced package: core
description: Hide content accessibly. name: html component: VisuallyHidden
description: Hide content accessibly name: visually-hidden component: VisuallyHidden package: visually-hidden
description: How Tamagui automatically stacks overlays and floating content name: z-index
description: Animate components as they mount and unmount
custom propAnimations Overview
Animation Drivers
description: Choose and configure animation drivers for your platform
Animations Overview
AnimatePresence
Config v5
description: Lightweight CSS transition-based animations
Animations Introduction
React Native Driver
Motion Driver
Reanimated Driver
description: High-performance web animations with WAAPI
Animations Introduction
CSS Driver
React Native Driver
Reanimated Driver
Motion Documentation
description: Spring-based animations using React Native Animated
Animations Introduction
CSS Driver
Motion Driver
Reanimated Driver
description: Advanced off-thread animations with Reanimated
Animations Introduction
CSS Driver
React Native Driver
Motion Driver
Reanimated Documentation
description: Swap out animation drivers per-platform or at runtime
AnimatePresence
Animation Drivers
description: Easy config and themes with @tamagui/config/v4
description: Modern config and themes with @tamagui/config/v5
description: Set up media queries, tokens, themes, and more.
animations: Configurable animation drivers.
media: Cross-platform, typed
themes: Define themes to style contextually
tokens: Your base tokens are much like static CSS variables.
settings: Many options for strictness and style behavior.
shorthands: Define shorter names for any style property.
@tamagui/animations-css
@tamagui/animations-react-native
@tamagui/animations-reanimated
@tamagui/animations-motion
description: Share variant props across compound components
description: Helpful functions and constants
description: Using custom fonts for each language
description: Advanced SSR, hydration, and client-only rendering in Tamagui
Configuration
useMedia
Themes
description: Extend and build custom and optimizable components
description: Change themes contextually
description: Accessing and using tokens
description: Respond to different screen sizes
description: Creating and using theme values
description: Simple typed prop styles through styled()
description: Your base components
description: Command-line tools for building, checking, and managing Tamagui projects
description: Starter kits for React Native
Expo Router
Takeout
starter-free)description: Put together your own design system.
description: Tips and tricks
description: How to set up Tamagui with Expo
description: Learn how to create a powerful yet simple API for a button with Tamagui and compound components hero: HowToBuildAButton demoName: BuildAButton
description: A comprehensive guide for migrating your Tamagui project from v1 to v2
description: How to set up Tamagui with Metro
description: How to set up Tamagui with Next.js
description: How to set up Tamagui with One
description: Learn how to create a suite of themes for a Tamagui app demoName: ThemeBuilder
description: How to set up Tamagui with Vite
description: How to set up Tamagui with Webpack
description: Performance tests and comparisons
description: Color palettes and customization options
description: Adding the compiler to your apps
description: Common error messages and how to resolve them
description: Get Tamagui set up, step by step
CLI
Bundler Setup
Design Systems
Discord
X
GitHub
Stitches
JSXStyle
Modulz
Framer Motion
description: All the base props
View
Text
description: How @tamagui/static works to speed up code
The Frontend Trilemma
Compiler Installation
Benchmarks
description: Tamagui accepts a superset of React Native styles
React Native View style props
React Native Text style props
description: Create themes and sub-themes
description: Understanding the default Tamagui token scale
description: Why Tamagui uses an optimizing compiler
description: Optional native integrations for better performance and UX name: native
description: An optional base for creating flex-based layouts. name: stacks component: Stacks package: stacks demoName: Stacks
description: An optional base for creating flex-based layouts name: stacks component: Stacks package: stacks demoName: Stacks
Reference these resources when working with Tooltip.