🎨 Archzos Universal Design System

A complete multi-platform component library supporting Web, Mobile, Desktop, TV, and Wearables from a single design token source.

📦 Published NPM Packages

Package	Version	Description	Size
@archzos/ui	2.0.0	React components (38+ components)	25KB
@archzos/tokens	1.0.0	Universal design tokens	15KB

🚀 Quick Start

For React/Web Projects

# Install the packages
npm install @archzos/ui @archzos/tokens

# Or with yarn
yarn add @archzos/ui @archzos/tokens

# Or with pnpm
pnpm add @archzos/ui @archzos/tokens

Basic Usage

// Import components from @archzos/ui
import { Button, Badge, Navbar, Footer, ModelCard } from '@archzos/ui';

// Import design tokens from @archzos/tokens
import { colors, spacing, typography, radius } from '@archzos/tokens';

function App() {
  return (
    <div>
      <Navbar />

      <div style={{ padding: spacing.lg }}>
        <Button variant="primary" size="lg">
          Click Me
        </Button>

        <Badge variant="success">New</Badge>

        <ModelCard
          name="GPT-4"
          author="OpenAI"
          description="Advanced language model"
          pricingInput="$0.03"
          pricingOutput="$0.06"
          contextWindow="128k"
        />
      </div>

      <Footer />
    </div>
  );
}

🎯 Available Components

Layout Components

import { Navbar, Footer, SettingsSidebar } from '@archzos/ui';

// Navigation bar with logo, links, and user menu
<Navbar />

// Footer with links and copyright
<Footer />

// Settings page sidebar
<SettingsSidebar />

Common Components

import { Button, Badge, SearchInput, UserDropdown } from '@archzos/ui';

// Button with multiple variants
<Button variant="primary" size="md" loading={false}>
  Click Me
</Button>

// Badge for status/labels
<Badge variant="success">Active</Badge>

// Search input field
<SearchInput placeholder="Search..." onSearch={handleSearch} />

// User account dropdown
<UserDropdown user={{ name: "John", email: "john@example.com" }} />

Home/Landing Components

import {
  HeroSection,
  StatsBar,
  FeatureCards,
  FeaturedModels,
  FeaturedAgents,
  Announcements,
  CTACards
} from '@archzos/ui';

// Hero section for landing page
<HeroSection
  title="Welcome to Archzos"
  subtitle="Build amazing experiences"
/>

// Statistics display
<StatsBar stats={[
  { label: "Users", value: "10K+" },
  { label: "Downloads", value: "50K+" }
]} />

// Feature highlight cards
<FeatureCards features={[
  { title: "Fast", description: "Lightning quick", icon: "⚡" },
  { title: "Secure", description: "Bank-level security", icon: "🔒" }
]} />

Model/AI Components

import { ModelCard, ModelsFilterBar } from '@archzos/ui';

// Individual model card
<ModelCard
  name="Claude 3"
  author="Anthropic"
  description="Advanced AI assistant"
  pricingInput="$0.002"
  pricingOutput="$0.024"
  contextWindow="200k"
  isNew={true}
/>

// Filter bar for models
<ModelsFilterBar
  onFilterChange={handleFilter}
  categories={["Language", "Vision", "Audio"]}
/>

Page Templates

import { HomePage, ModelsPage, SettingsPage, RankingsPage } from '@archzos/ui';

// Complete pre-built pages
<HomePage />
<ModelsPage />
<SettingsPage />
<RankingsPage />

🎨 Using Design Tokens

Import and Use Tokens

import { colors, typography, spacing, radius, shadows } from '@archzos/tokens';

// Use in styles
const styles = {
  container: {
    backgroundColor: colors.bg,           // '#ffffff'
    color: colors.text,                  // '#111827'
    padding: spacing.lg,                 // 32
    borderRadius: radius.lg,             // 8
    boxShadow: shadows.md,               // '0 4px 6px rgba(0,0,0,0.1)'
    fontSize: typography.lg,             // 18
    fontWeight: typography.semibold,    // 600
  }
};

Available Token Categories

// Colors (29 tokens)
colors.blue500    // '#3B82F6'
colors.gray100    // '#F3F4F6'
colors.text       // '#111827'
colors.bg         // '#ffffff'

// Typography (18 tokens)
typography.xs     // 12
typography.lg     // 18
typography.bold   // 700

// Spacing (13 tokens)
spacing.sm        // 8
spacing.md        // 16
spacing.lg        // 32

// Border Radius (7 tokens)
radius.sm         // 2
radius.md         // 4
radius.full       // 9999

// Shadows (5 tokens)
shadows.sm        // '0 1px 2px rgba(0,0,0,0.05)'
shadows.xl        // '0 20px 25px rgba(0,0,0,0.15)'

🔄 Multi-Platform Token Export

The token system can export to ANY platform:

# Export tokens to different platforms
npx @archzos/tokens export --format css      # For Web
npx @archzos/tokens export --format dart     # For Flutter
npx @archzos/tokens export --format swift    # For iOS
npx @archzos/tokens export --format kotlin   # For Android
npx @archzos/tokens export --format json     # For React Native

# Export all formats at once
npx @archzos/tokens export --all

Platform-Specific Usage

Flutter

// After exporting: npx @archzos/tokens export --format dart
import 'tokens.dart';

Container(
  color: AzTokens.Colors.blue500,
  padding: EdgeInsets.all(AzTokens.Spacing.md),
  child: Text('Hello'),
)

Swift/iOS

// After exporting: npx @archzos/tokens export --format swift
import SwiftUI

Text("Hello")
  .foregroundColor(AzTokens.Colors.blue500)
  .padding(AzTokens.Spacing.md)

Android/Kotlin

// After exporting: npx @archzos/tokens export --format kotlin
Text(
  text = "Hello",
  color = AzTokens.Colors.blue500,
  modifier = Modifier.padding(AzTokens.Spacing.md.dp)
)

CSS Variables

/* After exporting: npx @archzos/tokens export --format css */
.button {
  background-color: var(--az-color-blue500);
  padding: var(--az-spacing-md);
  border-radius: var(--az-radius-md);
}

💻 Development Setup

Clone and Install

# Clone the repository
git clone https://github.com/archzos/archzos-ui.git
cd archzos-ui

# Install pnpm (if not installed)
npm install -g pnpm

# Install all dependencies
pnpm install

# Build tokens
cd packages/tokens
pnpm build

# Export tokens to all platforms
pnpm export:all

Test Components

# Run the test app
cd test-archzos-ui
npm run dev

# Open http://localhost:3000

📱 Platform Support Matrix

Platform	Package	Status	Components
React (Web)	@archzos/ui	✅ Published	38+ components
React Native	@archzos/ui-native	🚧 Dev	Button, Card, Input
Flutter	archzos_ui_flutter	🚧 Dev	AzButton, AzCard
Vue 3	@archzos/ui-vue	🚧 Dev	AzButton
Svelte	@archzos/ui-svelte	🚧 Dev	AzButton
iOS/WatchOS	ArchzosWatchUI	🚧 Dev	AZButton
tvOS	ArchzosTVUI	🚧 Dev	AZTVButton
Android/WearOS	archzos-ui-wear	🚧 Dev	Compose components
Desktop	@archzos/desktop-adapter	🚧 Dev	Electron/Tauri

🎯 Real-World Examples

Example 1: Dashboard Layout

import { Navbar, SettingsSidebar, StatsBar, Badge } from '@archzos/ui';
import { colors, spacing } from '@archzos/tokens';

function Dashboard() {
  return (
    <div style={{ backgroundColor: colors.bg }}>
      <Navbar />

      <div style={{ display: 'flex' }}>
        <SettingsSidebar />

        <main style={{ flex: 1, padding: spacing.xl }}>
          <StatsBar stats={[
            { label: "Revenue", value: "$12.5K" },
            { label: "Users", value: "1,234" },
            { label: "Growth", value: "+15%" }
          ]} />

          <div style={{ marginTop: spacing.lg }}>
            <Badge variant="success">Online</Badge>
            <Badge variant="warning">Pending</Badge>
            <Badge variant="danger">Error</Badge>
          </div>
        </main>
      </div>
    </div>
  );
}

Example 2: AI Model Showcase

import { ModelCard, ModelsFilterBar, SearchInput } from '@archzos/ui';

function ModelShowcase() {
  const [models, setModels] = useState([
    { name: "GPT-4", author: "OpenAI", pricing: "$0.03" },
    { name: "Claude 3", author: "Anthropic", pricing: "$0.024" },
    { name: "Gemini", author: "Google", pricing: "$0.025" }
  ]);

  return (
    <div>
      <SearchInput onSearch={(q) => filterModels(q)} />
      <ModelsFilterBar categories={["Language", "Vision"]} />

      <div style={{ display: 'grid', gap: 20 }}>
        {models.map(model => (
          <ModelCard key={model.name} {...model} />
        ))}
      </div>
    </div>
  );
}

Example 3: Custom Themed Button

import { Button } from '@archzos/ui';
import { colors, spacing, radius } from '@archzos/tokens';

function CustomButton() {
  return (
    <Button
      style={{
        backgroundColor: colors.green500,
        padding: `${spacing.md}px ${spacing.xl}px`,
        borderRadius: radius.full,
        fontSize: typography.xl,
      }}
    >
      Custom Styled
    </Button>
  );
}

🛠️ Advanced Usage

Custom Token Configuration

Create .archzosrc.json in your project:

{
  "tokens": {
    "output": "./src/design-tokens",
    "formats": ["css", "json"],
    "prefix": "my-app"
  }
}

TypeScript Support

All packages include full TypeScript definitions:

import { ButtonProps, BadgeProps } from '@archzos/ui';
import { TokenColors, TokenSpacing } from '@archzos/tokens';

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};

const primaryColor: TokenColors = 'blue500';
const padding: TokenSpacing = 'md';

Tree Shaking

Both packages support tree shaking:

// Only imports what you use
import { Button } from '@archzos/ui';  // ✅ Only Button code
// Not: import * as UI from '@archzos/ui';  // ❌ Imports everything

📊 Package Stats

Total Components: 38+ React components
Design Tokens: 78 tokens across 6 categories
Bundle Size: @archzos/ui (25KB), @archzos/tokens (15KB)
Platform Support: 9 platforms
TypeScript: Full type definitions
Tree Shaking: Supported
Zero Runtime Dependencies: Only React as peer dependency

🔗 Important Links

NPM Packages:
- @archzos/ui
- @archzos/tokens
GitHub: archzos/archzos-ui
Documentation: This README
Issues: Report bugs

📄 License

MIT © archzos

🎉 Start Building!

# Install and start using immediately
npm install @archzos/ui @archzos/tokens

# Your first component
import { Button } from '@archzos/ui';
<Button>Get Started</Button>

Built with ❤️ for developers who need consistent UI across all platforms.

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
docs		docs
packages		packages
platforms		platforms
skills		skills
src		src
.gitignore		.gitignore
.npmignore		.npmignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
MULTIPLATFORM.md		MULTIPLATFORM.md
README.md		README.md
README_COMPLETE.md		README_COMPLETE.md
package-lock.json		package-lock.json
package.json		package.json
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎨 Archzos Universal Design System

📦 Published NPM Packages

🚀 Quick Start

For React/Web Projects

Basic Usage

🎯 Available Components

Layout Components

Common Components

Home/Landing Components

Model/AI Components

Page Templates

🎨 Using Design Tokens

Import and Use Tokens

Available Token Categories

🔄 Multi-Platform Token Export

Platform-Specific Usage

Flutter

Swift/iOS

Android/Kotlin

CSS Variables

💻 Development Setup

Clone and Install

Test Components

📱 Platform Support Matrix

🎯 Real-World Examples

Example 1: Dashboard Layout

Example 2: AI Model Showcase

Example 3: Custom Themed Button

🛠️ Advanced Usage

Custom Token Configuration

TypeScript Support

Tree Shaking

📊 Package Stats

🔗 Important Links

📄 License

🎉 Start Building!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages