@tamagui/core
- Universal style library for React.@tamagui/static
- Optimizing compiler that works withcore
andtamagui
.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.
To install Tamagui with all its components run:
npm install tamagui @tamagui/config
Next, create a Tamagui config file named tamagui.config.ts
:
import { config } from '@tamagui/config/v3'
import { createTamagui } from 'tamagui'
const tamaguiConfig = createTamagui(config)
// this makes typescript properly type everything based on the config
type Conf = typeof tamaguiConfig
declare module 'tamagui' {
interface TamaguiCustomConfig extends Conf {}
}
export default tamaguiConfig
// depending on if you chose tamagui, @tamagui/core, or @tamagui/web
// be sure the import and declare module lines both use that same name
Note: The v3
config imports the @tamagui/animations-css
driver on web and @tamagui/animations-react-native
on native. You can change these as you please, we provide exports for animationsCSS
and animationsNative
. If you want to use Reanimated, you can copy and paste this code and pass it as animations
to createTamagui
.
To use Tamagui in your Expo or Next.js projects, all you need to do is wrap your application in the TamaguiProvider
:
// this provides some helpful reset styles to ensure a more consistent look
// only import this from your web app, not native
import '@tamagui/core/reset.css'
import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'
export default function App() {
return (
<TamaguiProvider config={tamaguiConfig}>
{/* your app here */}
</TamaguiProvider>
)
}
Done! Now try out some components:
import { Button, Text } from 'tamagui'
function Example() {
return (
<Button>
<Text>My button</Text>
</Button>
);
}
To contribute to Tamagui reference the contributing guide.
To contribute to documentation reference the writing guide.