Development
Plugin
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
Plugin Signal61/100Solid
maintained100
capable29
documented22
adopted88
Install
$ npx -y skills add tamagui/tamagui --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
14,130
Stars
606
Forks
Active
Maintenance
TypeScript
Language
MIT
License
12h ago
Last commit
5y ago
Created
Repo: tamagui/tamagui
What's inside
Skills
3/git-safetyGit safety rules. INVOKE WHEN: git push, force push, git reset, git clean, destructive git, push force, reset hard. NEVER force push or do destructive git operations./release-safetyRelease safety rules. INVOKE WHEN: yarn release, npm publish, release canary, release packages, publishing, skip checks, skip tests. NEVER skip checks or tests without explicit permission./tamaguiUniversal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token",
Badges
1
README
1@tamagui/core- Universal style library for React.@tamagui/static- Optimizing compiler that works withcoreandtamagui.tamagui- UI kit that adapts to every platform.
See tamagui.dev for documentation.
Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.
It does this with an optimizing compiler that outputs platform-specific optimizations - it turns styled components, even with complex logic or cross-module imports, into a simple div alongside atomic CSS on the web, or a View with its style objects hoisted on native.
The entirety of Tamagui works at compile time and runtime, and can be set up gradually, with initial usage as simple as importing it and using the base views and styled function.
We recommend checking out the starters with npm create tamagui@latest, they range from a simple learning example to a production-ready monorepo.
The compiler optimizes most and ultimately flattens a majority of styled components. In the ~500px² responsive browser section of the Tamagui website, 49 of the 55 or so inline styled components are flattened to a div. The homepage gains nearly 15% on Lighthouse with the compiler on.
Contributing
To contribute to Tamagui reference the contributing guide.
To contribute to documentation, see the docs source in code/tamagui.dev/data/docs/.
File tree
1714tamagui/tamaguiView on GitHub
.claude/
skills/
git-safety/
SKILL.md
release-safety/
SKILL.md
.dockerignore
.gitattributes
.github/
actions/
install/
action.yml
FUNDING.yml
ISSUE_TEMPLATE/
bug.yml
scripts/
check-ios-detox-shards.mjs
run-maestro-flows.sh
workflows/
build-ios-kitchensink-app.yml
changelog.yml
checks.yaml
release.yml
test-ios-kitchensink-go.yml
test-ios-native.yml
test-native.yml
.gitignore
.node-version
.oxfmtignore
.oxfmtrc.jsonc
.oxlintrc.json
.prettierignore
.prettierrc
.vscode/
extensions.json
launch.json
settings.json
.watchmanconfig
AGENTS.md
assets/
banners.sketch
bento.sketch
brand.sketch
brand2.sketch
duck.sketch
emoji.sketch
heart.sketch
merch.sketch
screens.sketch
takeout.sketch
test.sketch
bun
bun.lock
bunfig.toml
CLAUDE.md
code/
compiler/
babel-plugin/
LICENSE
package.json
src/
index.ts
tsconfig.json
types/
index.d.ts
loader/
LICENSE
package.json
src/
css.ts
index.ts
loader.ts
polyfills.ts
requireResolve.ts
shouldExclude.ts
TamaguiPlugin.ts
test.ts
tsconfig.json
types/
css.d.ts
index.d.ts
loader.d.ts
polyfills.d.ts
requireResolve.d.ts
shouldExclude.d.ts
TamaguiPlugin.d.ts
test.d.ts
metro-plugin/
LICENSE
package.json
src/
index.ts
tsconfig.json
types/
index.d.ts
next-plugin/
LICENSE
package.json
src/
index.ts
withTamagui.ts
tsconfig.json
types/
index.d.ts
withTamagui.d.ts
static/
static-sync/
package.json
src/
index.ts
tsconfig.json
types/
index.d.ts
static-tests/
__mocks__/
styleMock.js
babel-config-test.cjs
LICENSE
package.json
require.js
tamagui.tsconfig.json
tests/
__snapshots__/
babel.native.test.tsx.snap
babel.web.test.tsx.snap
extract.web.test.tsx.snap
flatten.native.test.tsx.snap
styled.web.test.tsx.snap
webpack.test.tsx.snap
babel.native.test.tsx
babel.web.test.tsx
concatClassName.web.test.tsx
detectModuleFormat.web.test.tsx
extract-tests.tsx
extract.web.test.tsx
flatten.native.test.tsx
fonts.web.test.tsx
lib/
externalizeModules.js
extract.tsx
preTest.js
tamagui.config.cjs
test-constants.js
testStyles.tsx
loadTamagui.web.test.tsx
mediaInVariants.native.test.tsx
mediaInVariants.web.test.tsx
moduleFormat.web.test.tsx
spec/
constants.tsx
extract-spec-constants.ts
extract-specs.tsx
ssrThemeRepro.web.test.tsx
styled.web.test.tsx
webAlignment.web.test.tsx
webpack.test.tsx
tsconfig.json
static-worker/
package.json
src/
index.ts
tests/
error-handling.test.ts
tsconfig.json
types/
index.d.ts
vitest.config.ts
__mocks__/
styleMock.js
.gitignore
LICENSE
package.json
README.md
src/
check-dep-versions.ts
checkDeps.ts
constants.ts
exports.ts
extractor/
accessSafe.ts
babelParse.ts
buildClassName.ts
bundle.ts
bundleConfig.ts
concatClassName.ts
createEvaluator.ts
createExtractor.ts
createLogger.ts
detectModuleFormat.ts
ensureImportingConcat.ts
errors.ts
esbuildAliasPlugin.ts
esbuildTsconfigPaths.ts
evaluateAstNode.ts
extractHelpers.ts
extractMediaStyle.ts
extractToClassNames.ts
extractToNative.ts
findTopmostFunction.ts
generatedUid.ts
getPrefixLogs.ts
getPropValueFromAttributes.ts
getSourceModule.ts
getStaticBindingsForScope.ts
getTamaguiConfigPathFromOptionsConfig.ts
hasTopLevelAwait.ts
hoistClassNames.ts
literalToAst.ts
loadFile.ts
loadTamagui.ts
logLines.ts
normalizeTernaries.ts
propsToFontFamilyCache.ts
regenerateConfig.ts
removeUnusedHooks.ts
timer.ts
validHTMLAttributes.ts
watchTamaguiConfig.ts
getPragmaOptions.ts
helpers/
memoize.ts
requireTamaguiCore.ts
index.ts
registerRequire.ts
server.ts
setup.ts
types.ts
worker.ts
test-output.tsx
tsconfig.json
types/
check-dep-versions.d.ts
checkDeps.d.ts
constants.d.ts
exports.d.ts
extractor/
accessSafe.d.ts
babelParse.d.ts
buildClassName.d.ts
bundle.d.ts
bundleConfig.d.ts
concatClassName.d.ts
createEvaluator.d.ts
createExtractor.d.ts
createLogger.d.ts
detectModuleFormat.d.ts
ensureImportingConcat.d.ts
errors.d.ts
esbuildAliasPlugin.d.ts
esbuildTsconfigPaths.d.ts
evaluateAstNode.d.ts
extractHelpers.d.ts
extractMediaStyle.d.ts
extractToClassNames.d.ts
extractToNative.d.ts
findTopmostFunction.d.ts
generatedUid.d.ts
getPrefixLogs.d.ts
getPropValueFromAttributes.d.ts
getSourceModule.d.ts
getStaticBindingsForScope.d.ts
getTamaguiConfigPathFromOptionsConfig.d.ts
hasTopLevelAwait.d.ts
hoistClassNames.d.ts
literalToAst.d.ts
loadFile.d.ts
loadTamagui.d.ts
logLines.d.ts
normalizeTernaries.d.ts
propsToFontFamilyCache.d.ts
regenerateConfig.d.ts
removeUnusedHooks.d.ts
timer.d.ts
validHTMLAttributes.d.ts
watchTamaguiConfig.d.ts
getPragmaOptions.d.ts
helpers/
memoize.d.ts
requireTamaguiCore.d.ts
index.d.ts
registerRequire.d.ts
server.d.ts
setup.d.ts
types.d.ts
worker.d.ts
vite-plugin/
vite-plugin-cjs/
index.js
LICENSE
package.json
LICENSE
package.json
src/
extensions.ts
index.ts
loadTamagui.ts
plugin.ts
tsconfig.json
types/
extensions.d.ts
index.d.ts
loadTamagui.d.ts
plugin.d.ts
core/
animation-helpers/
LICENSE
package.json
src/
index.ts
normalizeTransition.ts
types.ts
tsconfig.json
types/
index.d.ts
normalizeTransition.d.ts
types.d.ts
animations-css/
LICENSE
package.json
src/
createAnimations.tsx
index.ts
tsconfig.json
types/
createAnimations.d.ts
index.d.ts
animations-moti/
LICENSE
package.json
src/
createAnimations.tsx
index.ts
polyfill.ts
tsconfig.json
types/
createAnimations.d.ts
index.d.ts
polyfill.d.ts
animations-motion/
LICENSE
MOTION_INTERRUPTION_RESEARCH.md
package.json
README.md
src/
createAnimations.tsx
index.native.ts
index.ts
polyfill.ts
tsconfig.json
types/
createAnimations.d.ts
index.d.ts
index.native.d.ts
polyfill.d.ts
WAAPI_RESEARCH.md
animations-react-native/
LICENSE
package.json
src/
createAnimations.tsx
index.ts
polyfill.ts
tsconfig.json
types/
createAnimations.d.ts
index.d.ts
polyfill.d.ts
animations-reanimated/
LICENSE
package.json
src/
createAnimations.tsx
index.ts
tsconfig.json
types/
createAnimations.d.ts
index.d.ts
assert/
LICENSE
package.json
src/
assertions.ts
index.ts
tsconfig.json
types/
assertions.d.ts
index.d.ts
calc/
LICENSE
package.json
src/
index.ts
tsconfig.json
types/
index.d.ts
cli/
LICENSE
package.json
run.cjs
src/
... 1600 moreShowing a partial view of a very large repo.
FAQ
tamagui is a Claude Code plugin with 3 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes git-safety, release-safety, tamagui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is tamagui?
- Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
- How do I install tamagui?
- Run these in Claude Code: npx -y skills add tamagui/tamagui --agent claude-code. Then prompt normally.
- Does tamagui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is tamagui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.