zjb522-apple-ui-mcp

v1.0.0

Published

3 months ago

Apple UI Components MCP Server - A comprehensive UI library with 1500+ components following Apple design language for Trae, VS Code, Cursor and other IDEs

Downloads

0High
0Medium
0Low

zjb522

mcp apple-ui ui-components design-system trae vscode cursor ios macos glassmorphism sf-pro components-library

Apple UI Components Library

A comprehensive UI component library based on Apple's design language, combining iOS and macOS design principles for a seamless cross-platform experience.

📋 Overview

Apple UI Components is a modern, responsive, and accessible UI library that brings Apple's design aesthetic to web applications. It features over 1500+ components, including basic UI elements, form controls, layout components, data visualization, media components, interactive elements, and utility classes.

✨ Features

Apple Design Language: Fusion of iOS and macOS design principles
Human-Centered Interface: Intuitive and user-friendly components
Responsive Design: Fully responsive and mobile-first approach
Dark Mode Support: Built-in dark mode capabilities
Glassmorphism Effects: Modern translucent design elements
SF Pro Typography: Apple's official font family
Accessibility Compliant: WCAG 2.1 AA standard
Cross-Platform Compatibility: Works seamlessly across devices
Extensive Component Library: 1500+ components for all use cases
Customizable: Easy to theme and extend

🚀 Quick Start

Installation

You can install Apple UI Components using one of the following methods:

1. CDN Link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/apple-ui.css">

2. NPM

npm install apple-ui-components

Then import it in your project:

import 'apple-ui-components';

3. Yarn

yarn add apple-ui-components

4. Manual Download

Download the apple-ui.css file from the repository and include it in your HTML:

<link rel="stylesheet" href="path/to/apple-ui.css">

Basic Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apple UI Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/apple-ui.css">
</head>
<body>
  <div class="ap-container">
    <h1>Welcome to Apple UI</h1>
    <button class="ap-btn ap-btn--filled">Click Me</button>
  </div>
</body>
</html>

📁 Project Structure

apple-ui-components/
├── dist/
│   └── apple-ui.css          # Minified production CSS
├── src/
│   ├── apple-ui.css           # Source CSS file
│   └── components/            # Component-specific styles
├── mcp/
│   └── mcp.json              # MCP configuration file
├── install.json              # Installation guide
├── README.md                 # This documentation
└── index.html                # Demo page

🎨 Design System

Color Palette

Apple UI Components uses Apple's system colors:

System Blue: #007AFF
System Green: #34C759
System Red: #FF3B30
System Orange: #FF9500
System Purple: #AF52DE
System Pink: #FF2D55
System Indigo: #5856D6
System Teal: #5AC8FA
System Yellow: #FFCC00
System Gray: #8E8E93

Typography

Font Family: SF Pro, -apple-system, BlinkMacSystemFont, sans-serif
Font Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
Font Sizes: 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px

Spacing System

Based on an 8px grid system:

Space 1: 4px
Space 2: 8px
Space 3: 12px
Space 4: 16px
Space 5: 20px
Space 6: 24px
Space 8: 32px
Space 10: 40px
Space 12: 48px
Space 16: 64px

Border Radius

Radius None: 0px
Radius Small: 4px
Radius Medium: 8px
Radius Large: 12px
Radius Extra Large: 16px
Radius Full: 9999px

📦 Components

Basic Components

Button: Various styles and sizes
Input: Text fields, password fields, etc.
Text Area: Multi-line text input
Select: Dropdown select menus
Checkbox: Checkbox inputs
Radio: Radio button inputs
Switch: Toggle switches
Label: Form labels
Badge: Notification badges
Chip: Tag-like elements

Form Components

Form Group: Grouped form elements
Form Row: Horizontal form layout
Form Grid: Grid-based form layout
Input Group: Inputs with add-ons
Date Picker: Date selection component
Time Picker: Time selection component
Range Slider: Range input component
Autocomplete: Auto-suggest input
File Upload: File selection component
Validation: Form validation styles

Layout Components

Container: Responsive containers
Grid: Grid layout system
Flex: Flexbox utilities
Sidebar: Side navigation
Header: Page headers
Footer: Page footers
Card: Content cards
Panel: Panel containers
Toolbar: Application toolbars
Navigation: Navigation components

Data Components

Table: Data tables with sorting and pagination
List: Various list styles
Data Card: Data display cards
Timeline: Timeline views
Progress: Progress bars and rings
Spinner: Loading spinners
Pagination: Pagination controls
Empty State: Empty state placeholders
Divider: Section dividers
Avatar: User avatars

Media Components

Image: Responsive images
Image Preview: Interactive image previews
Image Gallery: Image galleries
Media Player: Video player
Audio Player: Audio player
Video: Video components
Video Thumbnail: Video thumbnails
Media Card: Media content cards

Interactive Components

Modal: Modal dialogs
Drawer: Slide-out drawers
Toast: Notification toasts
Tooltip: Tooltip messages
Popover: Popover menus
Context Menu: Right-click menus
Dropdown: Dropdown menus
Tabs: Tabbed interfaces
Accordion: Collapsible sections
Carousel: Image carousels

Utility Components

Spacing: Margin and padding utilities
Typography: Text styling utilities
Colors: Color utilities
Borders: Border utilities
Shadows: Shadow utilities
Transitions: Transition utilities
Z-Index: Z-index utilities
Display: Display utilities
Position: Position utilities
Sizing: Width and height utilities

🎯 Best Practices

Naming Conventions

Class Prefix: All classes use the ap- prefix to avoid conflicts
BEM Syntax: Block, Element, Modifier syntax for consistency
Responsive Prefixes: ap-sm-, ap-md-, ap-lg-, ap-xl- for responsive utilities

Accessibility

Semantic HTML: Use proper HTML elements for their intended purpose
ARIA Attributes: Add appropriate ARIA attributes for screen readers
Keyboard Navigation: Ensure all components are keyboard navigable
Color Contrast: Maintain WCAG AA contrast ratios
Focus States: Clear focus indicators for all interactive elements

Performance

Purge Unused CSS: Use tools like PurgeCSS to reduce file size
Compression: Enable gzip/brotli compression for CSS files
CDN Delivery: Use a CDN for faster global delivery
Critical CSS: Extract critical CSS for above-the-fold content
Lazy Loading: Lazy load components when possible

Customization

CSS Variables: Override CSS variables to customize the design
Theme Support: Create custom themes using CSS variables
Modular Imports: Import only the components you need
Extending Components: Extend existing components with custom styles

🔧 Browser Support

Chrome: 60+
Firefox: 55+
Safari: 12+
Edge: 79+
IE 11: Limited functionality

📚 Documentation

Component Documentation

Each component has detailed documentation including:

Usage Examples: HTML structure and usage patterns
Configuration Options: Available classes and modifiers
Accessibility Guidelines: Best practices for accessibility
Browser Compatibility: Supported browsers
Customization Options: How to customize the component

API Reference

CSS Variables: Complete list of CSS variables
Utility Classes: Comprehensive utility class reference
Responsive Breakpoints: Breakpoint definitions
Component Classes: Full list of component classes

🛠️ Development

Local Development

Clone the repository
Open index.html in your browser to see the demo
Make changes to apple-ui.css
Refresh the page to see changes

Building for Production

npm run build

This will create a minified version in the dist directory.

🤝 Contributing

We welcome contributions to the Apple UI Components library!

How to Contribute

Fork the repository
Create a new branch
Make your changes
Submit a pull request

Contribution Guidelines

Follow the existing code style
Add documentation for new components
Test changes across browsers
Ensure accessibility compliance
Write clear commit messages

📄 License

Apple UI Components is licensed under the MIT License.

📞 Support

Documentation: https://apple-ui-components.github.io/docs
Issues: https://github.com/apple-ui-components/apple-ui/issues
Discord: https://discord.gg/apple-ui

📊 Component Count

Apple UI Components includes 1500+ components across all categories, making it one of the most comprehensive UI libraries available.

🎉 Acknowledgements

Inspired by Apple's Human Interface Guidelines
Built with modern CSS features
Designed for performance and accessibility
Created with ❤️ by the Apple UI Team

Apple UI Components - Bringing Apple's design excellence to the web.