A modern, accessible React component library built by OnRamp Lab
OnRamp Lab React UI is a comprehensive component library designed for building modern, accessible web applications. This library provides a collection of reusable UI components that follow best practices for usability, accessibility, and design consistency.
Built by OnRamp Lab
OnRamp Lab is an agile team of digital marketing operators, entrepreneurs, and technologists driving measurable value through innovative digital solutions. With 70+ professionals across Los Angeles and Taipei offices, we specialize in omnichannel digital marketing, performance-based monetization, and web publishing.
- 🎨 Beautiful Components - A wide range of customizable UI components
- ♿ Accessible - WCAG 2.1 compliant components out of the box
- 📱 Responsive - Mobile-first design approach
- 🌗 Dark Mode Ready - Built-in theme support
- 🔧 Customizable - Easy theming and styling options
- 📝 Well Documented - Comprehensive documentation and examples
- Node.js and npm installed
- Gulp CLI installed globally
npm install -g gulp# Install dependencies
npm install
# Start development server with live reload
gulp
# The app will be available at http://localhost:8080Our component library includes:
| Component | Description | Status |
|---|---|---|
| InputDate | Date picker with keyboard shortcuts | ✅ Stable |
| InputLabel | Labeled text input | ✅ Stable |
| InputInlinelabel | Inline labeled input | ✅ Stable |
| Autocomplete | Single-select autocomplete | ✅ Stable |
| AutocompleteMuti | Multi-select autocomplete | ✅ Stable |
| Textarea | Multi-line text input | ✅ Stable |
| Uploader | File upload component | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| ButtonGroup | Grouped button controls | ✅ Stable |
| Breadcrumb | Navigation breadcrumb | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| TableShow | Data display table | ✅ Stable |
| TableChoose | Selectable data table | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| Info | Information display | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| Pagination | Page navigation | ✅ Stable |
| Selection | Selection controls | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| HtmlEditor | WYSIWYG HTML editor | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| Img | Enhanced image component | ✅ Stable |
| Component | Description | Status |
|---|---|---|
| WmsEmaillist | Email list manager | ✅ Stable |
| WmsEmailparent | Email parent manager | ✅ Stable |
| WmsEmaileditor | Email editor | ✅ Stable |
'use strict';
let ui = ui || {};
// Date Input Example
ui.InputDate = React.createClass({
render() {
return (
<ui.InputDate name="birthDate" />
);
}
});// File Uploader Example
<ui.Uploader
listenFile={handleFileUpload}
/>Each component has its own documentation:
- Usage examples
- Props reference
- Event handlers
- Best practices
Visit the component's folder for detailed documentation.
UI/
├── src/ # React components source
│ ├── Home/ # Documentation home
│ ├── Uploader/ # File upload component
│ ├── InputDate/ # Date input component
│ ├── ButtonGroup/ # Button group component
│ └── ...
├── build/ # Compiled output
├── config/ # Configuration files
├── dist/ # Utilities
├── lib/ # PHP helpers
├── docs/ # Documentation
└── gulpfile.js # Build configuration
# Start development server
gulp
# Build for production
gulp build
# Watch for changes
gulp watch- React 0.14.x
- Babel 5.x (ES6 → ES5, JSX → JS)
- Gulp 3.9 (Build system)
- jQuery 2.1.x
- Bootstrap 3.x
- Font-Awesome 4.x
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
For in-depth analysis of modern UI/UX trends and component library best practices, check out our documentation:
- UI/UX Trends 2026 - Comprehensive analysis of 2025-2026 design trends
- Quick Start Guide - Action-oriented modernization guide
We welcome contributions from the OnRamp Lab team and the open-source community!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Add tests for new components
- Update documentation
- Ensure accessibility compliance
- Use
'use strict'in all files - Follow the component template structure:
// -------------------------------------------------------------------------------- // helper // -------------------------------------------------------------------------------- // -------------------------------------------------------------------------------- // event // -------------------------------------------------------------------------------- // -------------------------------------------------------------------------------- // render // --------------------------------------------------------------------------------
- ✅ Core component library
- ✅ Basic documentation
- ✅ Live reload development environment
- TypeScript migration
- React 19 upgrade
- Enhanced accessibility (WCAG 2.1 AA)
- Dark mode support
- Storybook integration
- Comprehensive test coverage
- Performance optimization
- Design system website
See UI/UX Trends 2026 for detailed modernization plans.
This project is licensed under the MIT License - see the LICENSE file for details.
OnRamp Lab - An agile team of digital marketing professionals
- Website: onramplab.com
- Locations: Los Angeles, Taipei, Shanghai
- Founded: 2015 by Lawrence Ng
For support, please contact the OnRamp Lab development team or open an issue in this repository.
- React team and community
- Bootstrap framework
- Font Awesome icons
- All contributors to this project
Built with ❤️ by OnRamp Lab
⭐ Star us on GitHub — it helps!