archzos-ui

A comprehensive React component library with 22 component groups, built with TypeScript and modern design patterns.

Installation

npm install archzos-ui

Features

• 🎨 22 Component Groups - Complete UI system with 38+ components
• 🚀 TypeScript Support - Full type definitions included
• 📦 Lightweight - Only 23KB compressed
• ⚛️ React 16.8+ - Compatible with React 16.8, 17, 18, 19, and future versions
• 🎯 Design Tokens - Consistent design system with customizable tokens
• 🔧 Zero Dependencies - Only React as peer dependency

Quick Start

import React from 'react'
import { Button, Badge, Navbar, Footer } from 'archzos-ui'

function App() {
  return (
    <>
      <Navbar />
      <div>
        <Button variant="primary">Click Me</Button>
        <Badge variant="success">New</Badge>
      </div>
      <Footer />
    </>
  )
}

Component Categories

Layout Components (3)

• Navbar - Navigation bar with brand, links, and user menu
• Footer - Site footer with links and copyright
• SettingsSidebar - Settings panel sidebar

Home Components (9)

• HeroSection - Landing page hero section
• StatsBar - Statistics display bar
• FeaturedModels - Model showcase grid
• FeaturedAgents - AI agents showcase
• FeatureCards - Feature highlight cards
• CTACards - Call-to-action cards
• Announcements - News and announcements
• GettingStartedSteps - Onboarding steps
• ProviderLogoGrid - Partner/provider logos

Common Components (4)

• Button - Button with multiple variants
• Badge - Status badges and labels
• SearchInput - Search input field
• UserDropdown - User account dropdown menu

Models Components (2)

• ModelCard - Individual model display card
• ModelsFilterBar - Model filtering controls

Rankings Components (2)

• RankingsTabs - Tab navigation for rankings
• TopAppsList - Top applications list

Settings Components (2)

• AccountSettings - Account settings form
• APIKeysTable - API key management table

Page Templates (4)

Complete page layouts ready to use:

• HomePage - Full home page template
• ModelsPage - Models listing page
• RankingsPage - Rankings page
• SettingsPage - Settings page

Design Tokens

Access design tokens for consistent styling:

import { tokens } from 'archzos-ui/src/tokens'

const styles = {
  color: tokens.colors.blue500,
  fontSize: tokens.typography.lg,
  padding: tokens.spacing.md,
  borderRadius: tokens.radius.md
}

Examples

Basic Button

import { Button } from 'archzos-ui'

<Button variant="primary" size="md" onClick={handleClick}>
  Click Me
</Button>

Navigation Bar

import { Navbar } from 'archzos-ui'

<Navbar />

Model Card

import { ModelCard } from 'archzos-ui'

<ModelCard
  model={{
    id: 'gpt-4',
    name: 'GPT-4',
    description: 'Advanced language model',
    context: '128k',
    pricing: { prompt: 0.01, completion: 0.03 }
  }}
/>

Complete Page

import { HomePage } from 'archzos-ui'

function App() {
  return <HomePage />
}

TypeScript Support

All components are fully typed. TypeScript definitions are included automatically.

import { Button, ButtonProps } from 'archzos-ui'

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

This package is maintained using an AI agent system. For contributing guidelines, see our GitHub repository.

License

MIT © archzos

Links

• NPM Package
• GitHub Repository
• Issue Tracker

Version History

• v1.1.3 - Added README and documentation
• v1.1.2 - Cleaned structure, improved organization
• v1.1.1 - Fixed React peer dependencies (>=16.8.0)
• v1.1.0 - Initial release with 22 component groups

Built with ❤️ by archzos