# gluestack/gluestack-ui-starter-kits architecture

> Architecture diagram of the GitHub repository gluestack/gluestack-ui-starter-kits, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gluestack/gluestack-ui-starter-kits
- Repository: https://github.com/gluestack/gluestack-ui-starter-kits

## Overview

This is a gluestack-ui Starter Kit: a sample cross-platform application and reusable UI foundation for Next.js, Expo, and a universal workspace. A user enters through a platform route, sees authentication screens, and can navigate among dashboard, news-feed, and profile examples. The universal workspace centralizes shared screens and components; the standalone apps also carry platform-specific copies. Sampled screens display mostly local example content rather than a demonstrated backend or persistence layer. The tree and excerpts support route-to-screen and screen-to-UI relationships, but not all route wiring was sampled.

Main entry points: [`expo-app/app`](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/app) (Expo routes), [`next/app`](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/app) (Next routes), [`universal/apps/expo-app/app`](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/expo-app/app) (Universal Expo routes), [`universal/apps/next/app`](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/next/app) (Universal Next routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_apps["Platform Apps"]
  node_expo_routes["Expo routes"]
  node_next_routes["Next routes"]
  node_universal_expo["Universal Expo routes"]
  node_universal_next["Universal Next routes"]
end

subgraph group_domains["Example Screens"]
  node_auth["Authentication screens"]
  node_dashboard["Dashboard example<br/>[index.tsx]"]
  node_feed["News feed<br/>[index.tsx]"]
  node_profile["Profile settings<br/>[index.tsx]"]
  node_expo_auth["Expo auth screens"]
  node_expo_dashboard["Expo dashboard<br/>[index.tsx]"]
  node_expo_feed["Expo news feed<br/>[index.tsx]"]
  node_expo_profile["Expo profile<br/>[index.tsx]"]
  node_next_auth["Next auth screens"]
  node_next_dashboard["Next dashboard<br/>[index.tsx]"]
  node_next_feed["Next news feed<br/>[index.tsx]"]
  node_next_profile["Next profile<br/>[index.tsx]"]
end

subgraph group_shared["Universal Packages"]
  node_screen_pkg["Shared screens"]
  node_component_pkg["Shared components"]
end

subgraph group_ui["UI Components"]
  node_expo_ui["Expo UI library"]
  node_next_ui["Next UI library"]
  node_universal_ui["Shared UI library"]
  node_expo_provider["Expo UI provider<br/>[index.tsx]"]
  node_next_provider["Next UI provider<br/>[index.tsx]"]
  node_universal_provider["Universal UI provider<br/>[index.tsx]"]
end

node_visitor(("App user"))

node_visitor -.->|"opens app"| node_expo_routes
node_visitor -.->|"opens app"| node_next_routes
node_visitor -.->|"opens app"| node_universal_expo
node_visitor -.->|"opens app"| node_universal_next
node_expo_routes -.->|"routes to"| node_expo_auth
node_expo_routes -.->|"routes to"| node_expo_dashboard
node_expo_routes -.->|"routes to"| node_expo_feed
node_expo_routes -.->|"routes to"| node_expo_profile
node_next_routes -.->|"routes to"| node_next_auth
node_next_routes -.->|"routes to"| node_next_dashboard
node_next_routes -.->|"routes to"| node_next_feed
node_next_routes -.->|"routes to"| node_next_profile
node_universal_expo -.->|"routes to"| node_auth
node_universal_expo -.->|"routes to"| node_dashboard
node_universal_expo -.->|"routes to"| node_feed
node_universal_expo -.->|"routes to"| node_profile
node_universal_next -.->|"routes to"| node_auth
node_universal_next -.->|"routes to"| node_dashboard
node_universal_next -.->|"routes to"| node_feed
node_universal_next -.->|"routes to"| node_profile
node_auth -.->|"uses controls"| node_component_pkg
node_dashboard -.->|"uses controls"| node_component_pkg
node_feed -.->|"uses controls"| node_component_pkg
node_profile -.->|"uses controls"| node_component_pkg
node_expo_auth -.->|"renders controls"| node_expo_ui
node_expo_dashboard -.->|"renders controls"| node_expo_ui
node_expo_feed -.->|"renders controls"| node_expo_ui
node_expo_profile -.->|"renders controls"| node_expo_ui
node_next_auth -.->|"renders controls"| node_next_ui
node_next_dashboard -.->|"renders controls"| node_next_ui
node_next_feed -.->|"renders controls"| node_next_ui
node_next_profile -->|"renders controls"| node_next_ui
node_screen_pkg -.->|"exports screen"| node_dashboard
node_screen_pkg -.->|"exports screen"| node_feed
node_screen_pkg -.->|"exports screen"| node_profile
node_component_pkg -.->|"provides controls"| node_universal_ui
node_expo_provider -.->|"configures UI"| node_expo_ui
node_next_provider -.->|"configures UI"| node_next_ui
node_universal_provider -.->|"configures UI"| node_universal_ui

click node_expo_routes "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/app"
click node_next_routes "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/app"
click node_universal_expo "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/expo-app/app"
click node_universal_next "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/next/app"
click node_auth "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/screens/auth"
click node_dashboard "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/dashboard/dashboard-layout/index.tsx"
click node_feed "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/news-feed/news-and-feed/index.tsx"
click node_profile "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/profile-screens/profile/index.tsx"
click node_expo_auth "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/screens/auth"
click node_expo_dashboard "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/dashboard/dashboard-layout/index.tsx"
click node_expo_feed "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/news-feed/news-and-feed/index.tsx"
click node_expo_profile "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/profile-screens/profile/index.tsx"
click node_next_auth "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/screens/auth"
click node_next_dashboard "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/dashboard/dashboard-layout/index.tsx"
click node_next_feed "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/news-feed/news-and-feed/index.tsx"
click node_next_profile "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/profile-screens/profile/index.tsx"
click node_screen_pkg "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/screens"
click node_component_pkg "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/components"
click node_expo_ui "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/components/ui"
click node_next_ui "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/components/ui"
click node_universal_ui "https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/components/ui"
click node_expo_provider "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/components/ui/gluestack-ui-provider/index.tsx"
click node_next_provider "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/components/ui/gluestack-ui-provider/index.tsx"
click node_universal_provider "https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/components/ui/gluestack-ui-provider/index.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_expo_routes,node_next_routes,node_universal_expo,node_universal_next,node_visitor toneBlue
class node_auth,node_dashboard,node_feed,node_profile,node_expo_auth,node_expo_dashboard,node_expo_feed,node_expo_profile,node_next_auth,node_next_dashboard,node_next_feed,node_next_profile toneAmber
class node_screen_pkg,node_component_pkg toneMint
class node_expo_ui,node_next_ui,node_universal_ui,node_expo_provider,node_next_provider,node_universal_provider toneRose
```

## Components

### Platform Apps

- [Expo routes](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/app): `expo-app/app`
- [Next routes](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/app): `next/app`
- [Universal Expo routes](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/expo-app/app): `universal/apps/expo-app/app`
- [Universal Next routes](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/apps/next/app): `universal/apps/next/app`

### Example Screens

- [Authentication screens](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/screens/auth): `universal/packages/screens/auth`
- [Dashboard example](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/dashboard/dashboard-layout/index.tsx): `universal/packages/screens/dashboard/dashboard-layout/index.tsx`
- [News feed](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/news-feed/news-and-feed/index.tsx): `universal/packages/screens/news-feed/news-and-feed/index.tsx`
- [Profile settings](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/screens/profile-screens/profile/index.tsx): `universal/packages/screens/profile-screens/profile/index.tsx`
- [Expo auth screens](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/screens/auth): `expo-app/screens/auth`
- [Expo dashboard](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/dashboard/dashboard-layout/index.tsx): `expo-app/screens/dashboard/dashboard-layout/index.tsx`
- [Expo news feed](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/news-feed/news-and-feed/index.tsx): `expo-app/screens/news-feed/news-and-feed/index.tsx`
- [Expo profile](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/screens/profile-screens/profile/index.tsx): `expo-app/screens/profile-screens/profile/index.tsx`
- [Next auth screens](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/screens/auth): `next/screens/auth`
- [Next dashboard](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/dashboard/dashboard-layout/index.tsx): `next/screens/dashboard/dashboard-layout/index.tsx`
- [Next news feed](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/news-feed/news-and-feed/index.tsx): `next/screens/news-feed/news-and-feed/index.tsx`
- [Next profile](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/screens/profile-screens/profile/index.tsx): `next/screens/profile-screens/profile/index.tsx`

### Universal Packages

- [Shared screens](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/screens): `universal/packages/screens`
- [Shared components](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/components): `universal/packages/components`

### UI Components

- [Expo UI library](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app/components/ui): `expo-app/components/ui`
- [Next UI library](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next/components/ui): `next/components/ui`
- [Shared UI library](https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal/packages/components/ui): `universal/packages/components/ui`
- [Expo UI provider](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/expo-app/components/ui/gluestack-ui-provider/index.tsx): `expo-app/components/ui/gluestack-ui-provider/index.tsx`
- [Next UI provider](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/next/components/ui/gluestack-ui-provider/index.tsx): `next/components/ui/gluestack-ui-provider/index.tsx`
- [Universal UI provider](https://github.com/gluestack/gluestack-ui-starter-kits/blob/main/universal/packages/components/ui/gluestack-ui-provider/index.tsx): `universal/packages/components/ui/gluestack-ui-provider/index.tsx`

### Other components

- **App user**

## Connections

- App user → Expo routes: opens app
- App user → Next routes: opens app
- App user → Universal Expo routes: opens app
- App user → Universal Next routes: opens app
- Expo routes → Expo auth screens: routes to
- Expo routes → Expo dashboard: routes to
- Expo routes → Expo news feed: routes to
- Expo routes → Expo profile: routes to
- Next routes → Next auth screens: routes to
- Next routes → Next dashboard: routes to
- Next routes → Next news feed: routes to
- Next routes → Next profile: routes to
- Universal Expo routes → Authentication screens: routes to
- Universal Expo routes → Dashboard example: routes to
- Universal Expo routes → News feed: routes to
- Universal Expo routes → Profile settings: routes to
- Universal Next routes → Authentication screens: routes to
- Universal Next routes → Dashboard example: routes to
- Universal Next routes → News feed: routes to
- Universal Next routes → Profile settings: routes to
- Authentication screens → Shared components: uses controls
- Dashboard example → Shared components: uses controls
- News feed → Shared components: uses controls
- Profile settings → Shared components: uses controls
- Expo auth screens → Expo UI library: renders controls
- Expo dashboard → Expo UI library: renders controls
- Expo news feed → Expo UI library: renders controls
- Expo profile → Expo UI library: renders controls
- Next auth screens → Next UI library: renders controls
- Next dashboard → Next UI library: renders controls
- Next news feed → Next UI library: renders controls
- Next profile → Next UI library: renders controls (evidence: `next/screens/profile-screens/profile/index.tsx`)
- Shared screens → Dashboard example: exports screen (evidence: `universal/packages/screens/dashboard/dashboard-layout/index.tsx`)
- Shared screens → News feed: exports screen (evidence: `universal/packages/screens/news-feed/news-and-feed/index.tsx`)
- Shared screens → Profile settings: exports screen (evidence: `universal/packages/screens/profile-screens/profile/index.tsx`)
- Shared components → Shared UI library: provides controls
- Expo UI provider → Expo UI library: configures UI
- Next UI provider → Next UI library: configures UI
- Universal UI provider → Shared UI library: configures UI