open-index/open-npm huggingface dataset:
npm package: @onehaul/ui
Description: Core UI components library designed and developed by OneHaul
Latest version: 1.1.4

# @onehaul/ui

## Demo
Check out our live Storybook demo: [OneHaul UI Components](https://onehaul-ui.vercel.app/)

## 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

```bash
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)

```javascript
// 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

```css
/* 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`

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

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

```jsx
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:

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