🧭 Compass UI

A React component library that guides your way to better user experience

Compass UI is a comprehensive React component library inspired by Ant Design, designed to help developers navigate through complex UI challenges with ease and precision.

✨ Features

• 🎯 Navigation-First Design - Components designed with user journey in mind
• 🧭 Consistent Direction - Unified design language across all components
• ⚡ Performance Optimized - Lightweight and fast components
• 🎨 Highly Customizable - Flexible theming and styling options
• 📱 Responsive Ready - Mobile-first approach
• 🔧 TypeScript Support - Full type safety out of the box
• 🌍 Accessibility - WCAG 2.1 compliant components

📦 Installation

npm install @xinghunm/compass-ui
# or
yarn add @xinghunm/compass-ui
# or
pnpm add @xinghunm/compass-ui

🚀 Quick Start

import React from 'react'
import { Button, ThemeProvider, defaultTheme } from '@xinghunm/compass-ui'

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button variant="primary">Navigate Forward</Button>
    </ThemeProvider>
  )
}

export default App

🧭 Design Philosophy

Navigation-Centric

Every component is designed to guide users naturally through their journey, like a compass pointing the way.

Consistent & Reliable

Just as a compass always points north, our components provide consistent behavior and appearance across your application.

Intuitive Direction

Clear visual hierarchy and interaction patterns that feel natural and predictable.

📚 Components

Navigation

• [x] Menu
• [x] Dropdown
• [x] Pagination
• [x] Steps
• [ ] Breadcrumb
• [ ] Navigation Bar

Layout

• [ ] Container
• [ ] Grid
• [ ] Space
• [ ] Divider

General

• [x] Button
• [x] ConfigProvider
• [ ] Icon
• [ ] Typography

Data Entry

• [x] Input
• [x] InputNumber
• [x] Select
• [x] DatePicker
• [ ] Form
• [ ] Checkbox
• [ ] Radio
• [ ] Switch

Data Display

• [x] Tree
• [ ] Table
• [ ] List
• [ ] Card
• [ ] Avatar
• [ ] Badge
• [ ] Tag
• [ ] Tooltip

Feedback

• [x] Message
• [x] Modal
• [x] Progress
• [ ] Alert
• [ ] Drawer
• [ ] Skeleton
• [ ] Spin

Theming

• [x] ThemeProvider
• [x] defaultTheme

📖 Documentation

• API Documentation - Complete API reference
• Development Guide - Development workflow and standards
• Changelog - Version history

📄 License

MIT © xinghunm

"A good compass will guide you home, good components will guide users to success."