0x1 Component Library

A crafted, high-performance component library for 0x1 Framework applications. Designed to be minimal, flexible, and zero-dependency, while providing a simple developer experience.

Features

✅ Zero Dependencies — Pure TypeScript/JSX components with no external libraries ✅ Type-Safe — Fully typed components with comprehensive TypeScript definitions ✅ Customizable — Easily customize components via props or extend them as needed ✅ Minimal — Designed for optimal bundle size and performance ✅ Accessible — Built with accessibility in mind, following WCAG guidelines ✅ Modern — Leveraging the latest web standards and best practices ✅ Beautiful Docs — Comprehensive markdown documentation for each component

Installation

Components can be added to your project using the 0x1 CLI:

# Add a specific component
0x1 add Button

# Add multiple components at once
0x1 add Button Card Container

Available Components

UI Components

| Component | Description | Status | |-----------|-------------|--------| | Button | Flexible button component with various styles and states | ✅ | | Card | Versatile card component for content containers | ✅ | | Badge | Small status indicators | 🏗️ | | Avatar | User profile pictures with fallback | 🏗️ | | Dialog | Modal dialog with customizable content | 🏗️ | | Dropdown | Toggleable menu for options | 🏗️ | | Toggle | On/off switch component | 🏗️ |

Layout Components

| Component | Description | Status | |-----------|-------------|--------| | Container | Responsive container with max-width | ✅ | | Grid | Flexible grid layout system | 🏗️ | | Stack | Vertical or horizontal stacking with consistent spacing | 🏗️ | | Divider | Horizontal or vertical dividing line | 🏗️ |

Form Components

| Component | Description | Status | |-----------|-------------|--------| | Input | Text input with validation | 🏗️ | | Select | Dropdown select menu | 🏗️ | | Checkbox | Customizable checkbox component | 🏗️ | | RadioGroup | Group of radio options | 🏗️ | | Switch | Toggle switch with animation | 🏗️ |

Data Display

| Component | Description | Status | |-----------|-------------|--------| | Table | Data table with sorting and filtering | ✅ | | List | Simple list component | 🏗️ | | Code | Code block with syntax highlighting | 🏗️ |

Feedback Components

| Component | Description | Status | |-----------|-------------|--------| | Toast | Notification toast messages | ✅ | | Alert | Contextual feedback messages | ✅ | | Progress | Loading and progress indicators | 🏗️ | | Skeleton | Loading placeholder | 🏗️ |

Component Structure

Each component follows a consistent structure:

ComponentName/
├── ComponentName.tsx      # Main component implementation
├── ComponentName.md       # Documentation with examples
├── variants.ts           # Style variants and configurations (if applicable)
└── utils.ts              # Helper functions (if needed)

Design Principles

The 0x1 Component Library follows these core principles:

1. Function over form — Components should be practical first, with styling as an enhancement
2. Composition over configuration — Prefer composable patterns over complex prop APIs
3. Progressive enhancement — Components should work without JavaScript when possible
4. Accessibility by default — All components must meet WCAG AA standards
5. Performance-focused — Minimal re-renders and optimal runtime performance

Contributing

We welcome contributions to the 0x1 Component Library! Please follow these steps:

1. Create a new component following the existing structure
2. Ensure comprehensive documentation and examples
3. Add appropriate TypeScript types
4. Test with different use cases
5. Submit a pull request

License

TDL © 0x1 Framework