npm package: @m.sohaib/fluxui
Description: A modern, production-ready React component library for building beautiful, accessible, and highly customizable UIs. Built with TypeScript, Tailwind CSS v4+, and a powerful oklch-based design system.
Author: Muhammad Sohaib Arshad
Latest version: 0.0.2

# fluxui

A modern, production-ready React component library for building beautiful, accessible, and highly customizable UIs. Built with TypeScript, Tailwind CSS v4+, and a powerful oklch-based design system.

---

## Features

- **50+ fully themeable, accessible React components**
- **Semantic Tailwind v4+ classes** (no arbitrary values in components)
- **oklch color system** for perceptually uniform, future-proof theming
- **Dark mode and custom themes ready**
- **Production-level code quality and accessibility**
- **TypeScript types for all components**
- **Sidebar and Header with subroute support**
- **No Tailwind config required** (uses CSS variables)

---

## Installation

```sh
# With yarn
yarn add fluxui
# Or with npm
npm install fluxui
```

Make sure to import css in root file

```tsx
import '@m.sohaib/fluxui/fluxui.css';
```

### Peer Dependencies
- `react` (18+ or 19+)
- `react-dom` (18+ or 19+)
- `clsx`

---

## Usage

```tsx
import { Button, Input, Header } from 'fluxui';

<Button variant="primary">Click me</Button>
<Input label="Email" placeholder="Enter your email" />
```

---

## Importing Styles

To ensure all components are styled correctly, **import the library's CSS file in your app entry point** (e.g., `app/layout.tsx` or `pages/_app.tsx` in Next.js):

```js
import 'fluxui/dist/fluxui.css';
```

This will include all required Tailwind and custom styles for the components.

---

## Custom Theming

You can override the default color variables to customize the theme. To do this, define your own CSS variables in your global CSS file **after** importing the library's CSS:

```css
:root {
  --primary: oklch(0.5 0.1 200); /* Your custom color */
  --primary-foreground: oklch(0.1 0.1 0);
  /* ...override any other variables as needed */
}
```

The values you define will take precedence, allowing you to easily theme the components.

---

## Theming & Design System

- All colors are defined in `globals.css` using the oklch color space for maximum fidelity and future-proofing.
- Use semantic Tailwind classes like `bg-primary`, `text-muted-foreground`, `border-border`, etc. in your own code.
- Easily override or extend the color system by changing CSS variables in `globals.css`.
- Shadows, radii, and spacing are also controlled by CSS variables.

Example (globals.css):
```css
:root {
  --primary: oklch(0.29 0.045 264);
  --primary-foreground: oklch(0.98 0 0);
  --sidebar: oklch(0.97 0.01 264);
  --sidebar-foreground: oklch(0.18 0 0);
  /* ...and many more */
}
```

---

## Available Components

- **Layout:** Sidebar, Header, Modal, Card, Accordion
- **Forms:** Input, Textarea, Select, MultiSelect, Checkbox, Radio, Toggle, FilePicker, DatePicker, DateRangePicker
- **Data Display:** Table, Badge, Avatar, Typography, Tooltip, Skeleton, Loading, Tabs, Pagination
- **Actions:** Button, IconButton
- **Feedback:** InactivityModal

All components are fully typed and support custom className, theming, and accessibility out of the box.

---

## Best Practices
- Use only semantic Tailwind classes in your own code for maximum theme compatibility.
- Use the provided color variables for custom components.
- All components are accessible and keyboard navigable by default.
- Use the `currentPath` and `onNavigate` props for navigation-aware components (Sidebar, Header).

---

## Build & TypeScript
- Built with [tsup](https://tsup.egoist.dev/) for fast, modern builds.
- TypeScript types are included for all components.
- Exports both ESM and CJS formats.

---

## License

MIT

---

## Author

**Muhammad Sohaib Arshad**  
[chaudharysohaib175@gmail.com](mailto:chaudharysohaib175@gmail.com)