@onehaul/ui

Demo

Check out our live Storybook demo: OneHaul UI Components

About

A lightweight UI component library designed and developed by OneHaul for the world, featuring custom styles and behavior. This library provides a set of reusable React components built on top of Ant Design, offering a consistent and modern user interface.

Features

• 🎨 Custom-styled components based on Ant Design
• 🚀 Lightweight and optimized bundle size
• 🌲 Tree-shakeable exports
• 📦 Support for both CommonJS and ES Modules
• 🎯 Simple and intuitive API
• 💅 Customizable styles
• ⚡️ Built with React and modern JavaScript

Installation

npm install @onehaul/ui

CSS Import

Important: You need to import the CSS file to get the component styles. Choose one of the following methods:

Method 1: Import CSS in your main app file (Recommended)

// In your main app file (App.js, index.js, or _app.js)
import '@onehaul/ui/styles';
// or
import '@onehaul/ui/dist/styles.css';

Method 2: Import CSS in your CSS file

/* In your main CSS file */
@import '@onehaul/ui/styles';
/* or */
@import '@onehaul/ui/dist/styles.css';

Method 3: Automatic import (if supported by your bundler)

Some components will automatically include their styles when imported, but for consistent results across all bundlers, we recommend using Method 1.

Theming

OneHaul UI supports two ways of theming:

1. Default Theme
   • Pre-configured theme matching OneHaul's design system
   • Just wrap your app with ThemeProvider

import { ThemeProvider } from "@onehaul/ui";

function App() {
    return (
        <ThemeProvider>
            <YourComponents />
        </ThemeProvider>
    );
}

const customTheme = {
    token: {
        colorPrimary: "#your-color",
        // ... other customizations
    },
};

function App() {
    return (
        <ThemeProvider theme={customTheme}>
            <YourComponents />
        </ThemeProvider>
    );
}

Icons

OneHaul UI comes with a set of custom icons that can be imported separately from the main package. The icons are optimized SVGs that can be used as React components.

Installation

Icons are included in the main package but are tree-shakeable. You can import them from the /icons subpath:

import { Home, Search, Language } from '@onehaul/ui/icons';