メニュー
Tamagui is a complete UI solution for React Native and Web, with a fully-featured UI kit, styling engine, and optimizing compiler.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.