Reusable UI components and design system - Reorganized for better maintainability
npm install @sudobility/componentsA comprehensive React component library and design system for building modern web applications.
Major Update: Components are now organized into logical categories with specialized domain packages available separately.
- šØ Complete Design System - Professional design tokens, colors, typography
- š§© 220+ UI Components - Organized into 8 categories (primitives, forms, navigation, charts, media, modals, data-display, interactive)
- āæ Accessibility First - Built with Radix UI primitives
- š Dark Mode Support - Full dark/light theme support
- š± Responsive Design - Mobile-first approach
- šÆ TypeScript - Fully typed with excellent IntelliSense
- š Tailwind CSS - Utility-first styling with customization
- ā” Performance Optimized - Tree-shakeable and lightweight
- š¦ Modular Packages - Domain-specific components in separate packages
``bash`
npm install @sudobility/components @sudobility/design
`bashWeb3 & Blockchain Components
npm install @sudobility/web3-components
$3
`bash
npm install react@^18.0.0 react-dom@^18.0.0 \
@heroicons/react@^2.2.0 \
@radix-ui/react-alert-dialog@^1.1.0 \
@radix-ui/react-dialog@^1.1.0 \
@radix-ui/react-label@^2.1.0 \
@radix-ui/react-select@^2.2.0 \
@radix-ui/react-slot@^1.2.0 \
@radix-ui/react-switch@^1.2.0 \
@radix-ui/react-tabs@^1.1.0 \
class-variance-authority@^0.7.0 \
clsx@^2.1.1 \
tailwind-merge@^3.0.0
`Component Categories
$3
Layout, typography, and feedback components - the building blocks.
`tsx
import { Button, Card, Alert, Spinner, Badge } from '@sudobility/components';
`$3
Comprehensive form components for user input.
`tsx
import { Input, Select, Checkbox, DatePicker } from '@sudobility/components';
`$3
Links, menus, breadcrumbs, tabs, and pagination.
`tsx
import { SmartLink, Tabs, Breadcrumb, Pagination } from '@sudobility/components';
`$3
Tables, lists, cards, and data visualization.
`tsx
import { DataTable, Avatar, Card, KeyValuePair } from '@sudobility/components';
`$3
Data visualization and charting components.
`tsx
import { PieChart, BarChart, LineChart, ProgressBar } from '@sudobility/components';
`$3
Image, video, and audio components.
`tsx
import { ImageGallery, VideoPlayer, AudioPlayer } from '@sudobility/components';
`$3
Dialogs, drawers, popovers, and tooltips.
`tsx
import { Modal, Dialog, Popover, Tooltip } from '@sudobility/components';
`$3
Drag & drop, gestures, and interactive behaviors.
`tsx
import { DragDrop, SwipeActions, PullToRefresh } from '@sudobility/components';
`Quick Start
`tsx
import { Button, Card, Input } from '@sudobility/components';function App() {
return (
);
}
`Specialized Packages
$3
`tsx
import { WalletConnect, AddressLabel, NFTGallery } from '@sudobility/web3-components';
`$3
`tsx
import { EmailCampaign, EmailAnalytics } from '@sudobility/email-components';
`$3
`tsx
import { StepCounter, WorkoutLog, CalorieTracker } from '@sudobility/fitness-components';
`$3
`tsx
import { PropertyCard, MortgageCalc, VirtualTour } from '@sudobility/realestate-components';
`Migration from v2.x
See MIGRATION_GUIDE.md for detailed migration instructions.
Key Changes:
- Component imports remain the same (backward compatible)
- New organized structure under the hood
- Specialized components moved to separate packages
- Tree-shaking improvements for smaller bundle sizes
Documentation
- Full Documentation: CLAUDE.md - Complete project documentation
- Component Map: COMPONENT_MIGRATION_MAP.md - All components categorized
- Migration Guide: MIGRATION_GUIDE.md - Upgrade from v2.x
Package Structure
`
@sudobility/components/
āāā primitives/ # Layout, typography, feedback
āāā forms/ # Inputs, advanced, builders
āāā navigation/ # Links, menus, tabs
āāā data-display/ # Tables, lists, cards
āāā charts/ # Data visualization
āāā media/ # Images, video, audio
āāā modals/ # Dialogs, popovers, tooltips
āāā interactive/ # Drag & drop, gestures
āāā core/ # Core utilities
āāā hooks/ # Custom React hooksSpecialized Packages:
āāā @sudobility/web3-components
āāā @sudobility/email-components
āāā @sudobility/fitness-components
āāā @sudobility/realestate-components
`Development
`bash
Build the library
npm run buildDevelopment mode with watch
npm run devType checking
npm run type-checkLinting
npm run lintTesting
npm test
``Contributions are welcome! Please read the contributing guidelines before submitting PRs.
MIT Ā© John Q Huang
- GitHub: https://github.com/sudobility/components
- Issues: https://github.com/sudobility/components/issues
- npm: @sudobility/components