Skip to content
forked from tamagui/tamagui

Universal UI kit and style system for React Native + Web - with an optimizing compiler πŸš„

License

Notifications You must be signed in to change notification settings

0xBigBoss/tamagui

This branch is 4439 commits behind tamagui/tamagui:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

886e378 Β· Dec 6, 2023
Dec 6, 2023
Dec 3, 2023
Nov 21, 2023
Oct 1, 2023
Dec 6, 2023
Sep 23, 2023
Dec 6, 2023
Dec 6, 2023
Dec 6, 2023
Jul 18, 2023
Dec 1, 2023
Jun 16, 2023
Aug 3, 2023
Dec 23, 2022
Sep 26, 2023
Nov 18, 2023
Dec 26, 2022
May 26, 2022
Nov 28, 2023
Sep 16, 2023
Dec 5, 2023
Dec 6, 2023
Dec 2, 2023
Aug 16, 2023
Jul 16, 2023
Dec 6, 2023

Repository files navigation

Tamagui

Style and UI for React (web and native) meet an optimizing compiler

NPM downloads Discord users online Commits per month


  • @tamagui/core - Universal style library for React.
  • @tamagui/static - Optimizing compiler that works with core and tamagui.
  • 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, turning styled components, even with complex logic or cross-module imports, into a simple div alongiside 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 do recomment to check out the starters with npm create tamagui@latest, they range from simple to production-ready.

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.

Learn more on the website.

Installing Tamagui

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/v2'

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 v2 config imports the css driver on web and react-native on native. For react-native, import the @tamagui/config/v2-native config, and for reanimated, import the @tamagui/config/v2-reanimated config.

Usage

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>
  );
}

Contributing

To contribute to Tamagui reference the contributing guide. To contribute to documentation reference the writing guide.

About

Universal UI kit and style system for React Native + Web - with an optimizing compiler πŸš„

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 88.8%
  • MDX 9.4%
  • JavaScript 1.1%
  • CSS 0.4%
  • PLpgSQL 0.3%
  • HTML 0.0%