OneCart UI

Cross-platform design system with React & React Native components and design tokens.

Installation

``bash npm install onecart-ui`

`Usage`

`$3`

`typescript // Import components import { Display, Heading, Body, Utility } from 'onecart-ui'; // Import icons import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons'; // Import tokens import { tokens } from 'onecart-ui/tokens';

function App() { return (


      
        
        Welcome
      

      This is a web component
      $49.99
      All components working


  );
}

$3

`typescript // Import mobile components import { Display, Heading, Body, Utility } from 'onecart-ui/mobile'; // Import icons import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons'; // Import tokens import { tokens } from 'onecart-ui/tokens';

function App() { return ( Welcome This is a mobile component $49.99 All components working ); }`

`$3`

`typescript // Web tokens import { tokens } from "onecart-ui/tokens/web";

// Mobile tokens import { tokens } from "onecart-ui/tokens/mobile";

// Use tokens in your styles const styles = { color: tokens.NEUTRAL_80, fontSize: tokens.BODY_MD_FONT_SIZE, };`

`$3`

`typescript // Import specific icons import { Home, Search, ShoppingCart } from 'onecart-ui/icons';

function MyComponent() { return (


      {/ Default size (24px) /}
      
      {/ Different sizes - use numeric values /}
      
 {/ Small /}
       {/ Medium-small /}
       {/ Default /}
       {/ Large /}
       {/ Extra large /}
       {/ Custom size /}
      {/ With color /}
      
      {/ With className and style (web only) /}
              size={32}
        color="blue"
        className="my-icon"
        style={{ marginRight: 8 }}
      />


  );
}


Components
$3
Typography components are available for both web and mobile platforms:
Web (React):

`typescript import { Display, Heading, Body, Utility } from "onecart-ui";`

Mobile (React Native):

`typescript import { Display, Heading, Body, Utility } from "onecart-ui/mobile";`

#### Display Component

- Sizes: 2xl, xl- Usage: Large hero text and prominent headings

`typescript Large Display Text Smaller Display`

#### Heading Component

- Sizes: xl, lg, md, sm, xs, 2xs- Usage: Section titles and semantic headings

`typescript Extra Large Heading Large Heading Medium Heading Small Heading Extra Small Heading Tiny Heading`

#### Body Component

- Sizes: xl, lg, md, sm- Usage: Paragraph text and content

`typescript Emphasized content text Introduction text Standard paragraph text Caption or secondary text`

#### Utility Component

- Variants: button, link, caption- Usage: UI labels and metadata

`typescript BUTTON TEXT Link Text Caption text`

`$3`

`typescript import { Home, Search, ShoppingCart, Menu, Notifications, Add, Remove, } from "onecart-ui/icons";`

- Sizes: Numeric values (16, 20, 24, 28, 32, 40, 48, etc.) - Colors: Any valid color string

`typescript


📱 Complete Mobile Example

`typescript import React from 'react'; import { View, ScrollView, StyleSheet } from 'react-native'; import { Display, Heading, Body, Utility } from 'onecart-ui/mobile'; import { Home, ShoppingCart } from 'onecart-ui/icons';

function ProductCard() { return ( Product Card

$49.99 Free shipping

Premium Wireless Headphones Crystal-clear audio with active noise cancellation and 30-hour battery life. ); }

const styles = StyleSheet.create({ card: { backgroundColor: 'white', borderRadius: 12, padding: 16, }, header: { flexDirection: 'row', alignItems: 'center', gap: 8, }, });`

`⚙️ React Native Setup`

`$3`

`json { "dependencies": { "onecart-ui": "^0.2.4", "react": "19.2.0", "react-native": "0.83.1", "react-native-svg": "^15.15.1" } }`

`$3`

`bash npm install onecart-ui react-native-svg`

`$3`

`bash cd ios && pod install`

`$3`

Add the following to metro.config.js to ensure proper React resolution:

`javascript const path = require("path");

const config = { resolver: { extraNodeModules: { react: path.resolve(__dirname, "node_modules/react"), "react-native": path.resolve(__dirname, "node_modules/react-native"), }, }, };

module.exports = config;`

`Development`

This is a monorepo managed with npm workspaces and Turbo.

`bash

`Install dependencies`


npm install
Build all packages

npm run build
Run development mode

npm run dev
Generate design tokens

npm run generate-tokens


Package Structure

`onecart-ui/ dist/ # Built components (web & mobile) tokens/ # Design tokens (CSS, JS) icons/ # Icon components packages/ tokens/ # Token source & generator components/ # Component source icons/ # Icon source & generator apps/ docs/ # Storybook documentation`

`Development Workflow`

`$3`

`bash

`Build all packages (optimized - uses cached SVGs)`


npm run build
Build with watch mode for development

npm run dev
Build specific packages

cd packages/components && npm run build
cd packages/tokens && npm run build
cd packages/icons && npm run build


Note: The build process is optimized to be fast. Icon SVG files are committed to the repository, so builds don't require Figma API access or downloading assets.
$3
When icons are updated in Figma or new icons are added:

`bash

`In packages/icons directory`


cd packages/icons
npm run sync:icons


This will:

1. Fetch the latest icons from Figma 2. Download SVG files topackages/icons/svg/3. Generate React components for both web and React Native 4. Update the icon metadata

After syncing, commit the updated SVG files:

`bash git add packages/icons/svg/ packages/icons/icons-metadata.json git commit -m "chore: sync icons from Figma"`

Requirements for icon sync:

- .env file with FIGMA_PERSONAL_ACCESS_TOKEN and FILE_ID- The Figma file must have an "Icon" page with icon components

`$3`

`bash

`Sync tokens from Figma (requires Tokens Studio plugin)`


npm run generate-tokens


Next Steps
See bottom of generated setup output for roadmap suggestions.
Token Sync (Figma / Tokens Studio)

The tokens pipeline supports pulling design tokens from a Figma file using figma-token-engine.

1. Copy .env.example to .envat repo root. 2. Fill in:

- FIGMA_PERSONAL_ACCESS_TOKEN-FIGMA_FILE_ID

3. Generate tokens:

`bash npm run generate-tokens``

OneCart UI

Cross-platform design system with React & React Native components and design tokens.

Installation

``bash npm install onecart-ui`

`Usage`

`$3`

function App() { return (


      
        
        Welcome
      

      This is a web component
      $49.99
      All components working


  );
}

$3

function App() { return ( Welcome This is a mobile component $49.99 All components working ); }`

`$3`

`typescript // Web tokens import { tokens } from "onecart-ui/tokens/web";

// Mobile tokens import { tokens } from "onecart-ui/tokens/mobile";

// Use tokens in your styles const styles = { color: tokens.NEUTRAL_80, fontSize: tokens.BODY_MD_FONT_SIZE, };`

`$3`

`typescript // Import specific icons import { Home, Search, ShoppingCart } from 'onecart-ui/icons';

function MyComponent() { return (


      {/ Default size (24px) /}
      
      {/ Different sizes - use numeric values /}
      
 {/ Small /}
       {/ Medium-small /}
       {/ Default /}
       {/ Large /}
       {/ Extra large /}
       {/ Custom size /}
      {/ With color /}
      
      {/ With className and style (web only) /}
              size={32}
        color="blue"
        className="my-icon"
        style={{ marginRight: 8 }}
      />


  );
}


Components
$3
Typography components are available for both web and mobile platforms:
Web (React):

`typescript import { Display, Heading, Body, Utility } from "onecart-ui";`

Mobile (React Native):

`typescript import { Display, Heading, Body, Utility } from "onecart-ui/mobile";`

#### Display Component

- Sizes: 2xl, xl- Usage: Large hero text and prominent headings

`typescript Large Display Text Smaller Display`

#### Heading Component

- Sizes: xl, lg, md, sm, xs, 2xs- Usage: Section titles and semantic headings

`typescript Extra Large Heading Large Heading Medium Heading Small Heading Extra Small Heading Tiny Heading`

#### Body Component

- Sizes: xl, lg, md, sm- Usage: Paragraph text and content

`typescript Emphasized content text Introduction text Standard paragraph text Caption or secondary text`

#### Utility Component

- Variants: button, link, caption- Usage: UI labels and metadata

`typescript BUTTON TEXT Link Text Caption text`

`$3`

`typescript import { Home, Search, ShoppingCart, Menu, Notifications, Add, Remove, } from "onecart-ui/icons";`

- Sizes: Numeric values (16, 20, 24, 28, 32, 40, 48, etc.) - Colors: Any valid color string

`typescript


📱 Complete Mobile Example

function ProductCard() { return ( Product Card

$49.99 Free shipping

Premium Wireless Headphones Crystal-clear audio with active noise cancellation and 30-hour battery life. ); }

const styles = StyleSheet.create({ card: { backgroundColor: 'white', borderRadius: 12, padding: 16, }, header: { flexDirection: 'row', alignItems: 'center', gap: 8, }, });`

`⚙️ React Native Setup`

`$3`

`json { "dependencies": { "onecart-ui": "^0.2.4", "react": "19.2.0", "react-native": "0.83.1", "react-native-svg": "^15.15.1" } }`

`$3`

`bash npm install onecart-ui react-native-svg`

`$3`

`bash cd ios && pod install`

`$3`

Add the following to metro.config.js to ensure proper React resolution:

`javascript const path = require("path");

const config = { resolver: { extraNodeModules: { react: path.resolve(__dirname, "node_modules/react"), "react-native": path.resolve(__dirname, "node_modules/react-native"), }, }, };

module.exports = config;`

`Development`

This is a monorepo managed with npm workspaces and Turbo.

`bash

`Install dependencies`


npm install
Build all packages

npm run build
Run development mode

npm run dev
Generate design tokens

npm run generate-tokens


Package Structure

`Development Workflow`

`$3`

`bash

`Build all packages (optimized - uses cached SVGs)`


npm run build
Build with watch mode for development

npm run dev
Build specific packages

cd packages/components && npm run build
cd packages/tokens && npm run build
cd packages/icons && npm run build


Note: The build process is optimized to be fast. Icon SVG files are committed to the repository, so builds don't require Figma API access or downloading assets.
$3
When icons are updated in Figma or new icons are added:

`bash

`In packages/icons directory`


cd packages/icons
npm run sync:icons


This will:

1. Fetch the latest icons from Figma 2. Download SVG files topackages/icons/svg/3. Generate React components for both web and React Native 4. Update the icon metadata

After syncing, commit the updated SVG files:

`bash git add packages/icons/svg/ packages/icons/icons-metadata.json git commit -m "chore: sync icons from Figma"`

Requirements for icon sync:

- .env file with FIGMA_PERSONAL_ACCESS_TOKEN and FILE_ID- The Figma file must have an "Icon" page with icon components

`$3`

`bash

`Sync tokens from Figma (requires Tokens Studio plugin)`


npm run generate-tokens


Next Steps
See bottom of generated setup output for roadmap suggestions.
Token Sync (Figma / Tokens Studio)

The tokens pipeline supports pulling design tokens from a Figma file using figma-token-engine.

1. Copy .env.example to .envat repo root. 2. Fill in:

- FIGMA_PERSONAL_ACCESS_TOKEN-FIGMA_FILE_ID

3. Generate tokens:

`bash npm run generate-tokens``