tamagui

Name: tamagui
Availability: InStock
Author: Tamagui

Guide Tamagui design system usage with tokens, themes, and component patterns.

14.1k|606|Updated Oct 16, 2020

Search Tags:#react #cross-platform #themes #tokens #compiler #styled #tamagui

Ready to run

npx skills add https://github.com/tamagui/tamagui --skill tamagui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tamagui
Source: https://github.com/tamagui/tamagui/tree/main/plans/tamagui-skill/skills/tamagui
Command: npx skills add https://github.com/tamagui/tamagui --skill tamagui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured guide to learn and apply Tamagui's design system across web and native apps, reducing guesswork and speeding up UI development.

Core Features & Use Cases

Token-driven styling: learn to use styled(), tokens, and variants to build reusable UI primitives.
Component usage: work with core components like Button, Dialog, Sheet, XStack/YStack, etc.
Theme and responsiveness: configure themes and responsive styles across platforms, with compiler optimizations.
Use Case: Create a cross-platform feature with consistent design tokens and behaviors.

Quick Start

In your Tamagui project, run a project-specific prompt generation: npx tamagui generate-prompt
If you want tokens for a specific project, run: npx tamagui generate-prompt to produce tamagui-prompt.md with your design tokens and theme names.

Frequently Asked Questions about tamagui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up design tokens and themes in a cross-platform React app?▼

Design tokens in Tamagui define colors, spacing, and typography once, then apply consistently across web and native. Use styled() with token names and configure Themes in your tamagui.config.ts to create theme variants. Run npx tamagui generate-prompt to extract your project's tokens and theme names for reference.

Can I use Tamagui for both web and native apps with the same component code?▼

Yes. Tamagui compiles the same styled() components and token-based styles to web (CSS) and native (React Native) simultaneously. XStack, YStack, and other primitives handle layout differences automatically, reducing platform-specific code.

What's the best way to build responsive styles across platforms?▼

Use Tamagui's responsive style syntax with tokens and media queries in styled() components. Define breakpoints in your theme configuration, then apply conditional styles that adapt layouts for mobile, tablet, and desktop without platform-specific branching.

How do I create reusable UI components with consistent styling?▼

Build components using styled() with token-driven variants and theme-aware props. Define Button, Dialog, Sheet, and custom primitives once with tokens, then compose them across your app. Variants let you create size, color, and state permutations without duplicating style logic.

What compiler optimizations does Tamagui provide?▼

Tamagui's compiler extracts and flattens styled() definitions at build time, removing runtime overhead and generating optimized CSS for web and native bytecode. This reduces bundle size and improves performance without changing your component API.

Do I need to configure Tamagui separately for each project?▼

Yes. Each Tamagui project requires tamagui.config.ts to define tokens, themes, and compiler settings. Run npx tamagui generate-prompt in your project to create tamagui-prompt.md with your specific tokens and theme names for reference.