Liftera UI

Structure

packages/ui/
  tokens/
    colors.ts            → Global color palette
    typography.ts        → Type scale
    spacing.ts           → Spacing system
  components/
    <Component>.tsx      → Shared components with Gluestack UI
  index.ts               → Barrel export

Rules

1. Gluestack UI as base

Use Gluestack UI components as base and extend via styled variants.

import { Button } from "@gluestack-ui/themed";

export function PrimaryButton(props: ButtonProps) {
  return <Button bg="$primary500" {...props} />;
}

2. NativeWind for additional styles

Apply extra styles with NativeWind (className) when Gluestack doesn't cover the case.

3. Centralized tokens

All design values (colors, typography, spacing) live in tokens/ and are imported from there. Never repeat magic values in components.

4. Cross-platform

Components must work on both web (Next.js) and mobile (Expo). Gluestack UI + NativeWind guarantee cross-platform compatibility.

5. Server Component safety

For web, non-interactive components should be Server Components by default. Only add "use client" when they need interactivity (state, effects, event handlers).