@cleosync/cosmos-ui

Cosmos UI is Cleosync's React Native and Expo design system. It ships primitives, UI atoms, composed app components, providers, and reusable module runtime helpers from a single package.

Install

npm install @cleosync/cosmos-ui

Install peer packages required by the parts of Cosmos you use. The companion CLI can scaffold module wiring from cosmos.config.ts.

npm install -D @cleosync/cosmos-cli
npx cosmos init

Setup

Create cosmos.config.ts:

import { defineConfig } from '@cleosync/cosmos-ui';

export default defineConfig({
  colors: {
    primary: '#22C55E',
  },
  modules: {
    api: { baseUrl: process.env.EXPO_PUBLIC_API_URL },
    query: true,
    errors: true,
  },
  components: {
    Button: { defaultVariant: 'solid', defaultSize: 'md' },
    Input: { defaultVariant: 'default', defaultSize: 'md' },
  },
});

Wrap your app:

import { CosmosProvider } from '@cleosync/cosmos-ui';
import config from '../cosmos.config';

export default function RootLayout() {
  return (
    <CosmosProvider config={config} mode="system">
      {/* router */}
    </CosmosProvider>
  );
}

Usage

import { Button, Card, CosmosText, Screen } from '@cleosync/cosmos-ui';

export default function Home() {
  return (
    <Screen bg="bgBase" scroll>
      <Card gap={3}>
        <CosmosText variant="headingMd">Cosmos UI</CosmosText>
        <CosmosText color="textSecondary" variant="bodyMd">
          Package-first design system for Expo apps.
        </CosmosText>
        <Button label="Continue" onPress={() => {}} />
      </Card>
    </Screen>
  );
}

Principles

• Import only from @cleosync/cosmos-ui.
• Configure the design system through cosmos.config.ts.
• Do not copy Cosmos component files into apps.
• Use Cosmos primitives before raw React Native views.
• Keep colors semantic and theme-aware.