Plataformas

React Native

aura-ui-native leva os tokens e os 33 temas do Aura para iOS, Android e web — sem dependências nativas obrigatórias, funcionando no Expo Go.

1Instale

bash

pnpm add aura-ui-native

No Expo, prefira npx expo install aura-ui-native. Para as variantes gradient e glass, instale também expo-linear-gradient e expo-blur (opcionais).

2Adicione o AuraProvider

App.tsx

import { AuraProvider } from "aura-ui-native";
import { LinearGradient } from "expo-linear-gradient"; // opcional
import { BlurView } from "expo-blur"; // opcional

export default function App() {
  return (
    <AuraProvider theme="aura" defaultMode="system" components={{ LinearGradient, BlurView }}>
      <Home />
    </AuraProvider>
  );
}

theme: um dos 33 temas; mode / defaultMode: light, dark ou system.
Marca própria: overrides={{ colors: { primary: "#0ea5e9" }, radius: 16 }}.
Sem LinearGradient/BlurView, gradiente e vidro caem para cor sólida e superfície translúcida.

3Use os componentes

Home.tsx

import { Button, Card, CardTitle, Input, Screen, Text, useAura } from "aura-ui-native";

export function Home() {
  const t = useAura(); // t.colors, t.space(4), t.radius.lg, t.setTheme("ocean"), t.toggleMode()

  return (
    <Screen>
      <Text variant="h1">Olá!</Text>
      <Card variant="elevated">
        <CardTitle>Resumo do mês</CardTitle>
      </Card>
      <Input label="E-mail" keyboardType="email-address" />
      <Button fullWidth onPress={() => t.toggleMode()}>
        Alternar tema
      </Button>
    </Screen>
  );
}

Layout por tokens: <Box p={4} bg="muted" radius="lg" shadow={2}> e <HStack space={2}> usam a escala de 4px. Para estilos próprios que acompanham o tema:

tsx

import { makeStyles } from "aura-ui-native";

const useStyles = makeStyles((t) => ({
  card: {
    backgroundColor: t.colors.surface,
    borderRadius: t.radius.lg,
    padding: t.space(4),
    ...t.shadow(2)
  }
}));

As demos deste site são React Native de verdade

Rodam no navegador com react-native-web e seguem o tema escolhido no topo da página. Ver todos os componentes nativos.