@kaushalparajuli/react-crud-ui

A comprehensive React CRUD and UI component library with Zustand store integration, layout components, and CLI code generator.

Features

• 🎨 20+ UI Components - Button, Card, Badge, Dialog, Select, Tabs, Table, and more
• 📊 CRUD Components - DataTable, CrudList, CrudForm, CrudDetail with store integration
• 🔄 Zustand Store Factory - Create CRUD stores with minimal code
• 🎯 Form Components - QInput, QSelect, QSwitch, QSearchSelect with validation
• 🏗️ Layout Components - AuthLayout, LoginPage, DashboardLayout with Sidebar & Header
• 📱 Responsive - Mobile-first design with Tailwind CSS v4
• 🌙 Dark Mode - Built-in dark mode support via CSS variables
• ⚡ TypeScript Ready - Full TypeScript support
• 🛠️ CLI Generator - Generate CRUD modules with one command

Documentation

• Getting Started - Installation and setup
• UI Components - Button, Card, Badge, Input, Select, etc.
• CRUD Components - DataTable, CrudList, CrudForm, CrudDetail
• Form Components - QInput, QTextarea, QSelect, QSwitch
• Layout Components - AuthLayout, LoginPage, DashboardLayout
• Store Factory - createCrudStore and store patterns

Installation

npm install @kaushalparajuli/react-crud-ui
# or
yarn add @kaushalparajuli/react-crud-ui
# or
pnpm add @kaushalparajuli/react-crud-ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom react-router-dom zustand

CLI

Generate CRUD modules with a single command:

npx @kaushalparajuli/react-crud-ui generate <module-name>

Example:

npx @kaushalparajuli/react-crud-ui generate product

This will create:

• src/pages/<module>/ModuleListPage.jsx - List page with table and actions
• src/pages/<module>/ModuleFormPage.jsx - Create/edit form page
• src/pages/<module>/ModuleDetailPage.jsx - Detail view page
• src/routes/modules/<module>Routes.js - Route definitions
• src/stores/use<Module>Store.js - Zustand store for CRUD operations

Setup

1. Import Styles

Add the styles to your main entry file (e.g., main.jsx or App.jsx):

import '@kaushalparajuli/react-crud-ui/styles.css'

2. Configure Tailwind (Optional)

If you're using Tailwind CSS in your project, add the package to your content paths:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@kaushalparajuli/react-crud-ui/dist/**/*.{js,cjs}',
  ],
  // ... rest of config
}

Usage

UI Components

```jsx
import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@kaushalparajuli/react-crud-ui'

function MyComponent() { return ( My Card Active <Button onClick={() => alert('Clicked!')}>Click Me ) }

### Form Components

```jsx
```jsx
import { QInput, QSelect, QSwitch, QForm } from '@kaushalparajuli/react-crud-ui'

function MyForm() { const handleSubmit = (e) => { const formData = new FormData(e.target) console.log(Object.fromEntries(formData)) }

return ( <QSelect label="Status" name="status" options={[ { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, ]} /> Save ) }

### DataTable

```jsx
```jsx
import { DataTable } from '@kaushalparajuli/react-crud-ui'

const columns = [ { header: 'Name', accessor: 'name', sortable: true }, { header: 'Email', accessor: 'email' }, { header: 'Status', accessor: 'status', render: (row) => {row.status} }, ]

const actions = [ { label: 'View', icon: Eye, onClick: (row) => console.log('View', row) }, { label: 'Edit', icon: Pencil, onClick: (row) => console.log('Edit', row) }, { label: 'Delete', icon: Trash2, variant: 'destructive', onClick: (row) => console.log('Delete', row) }, ]

function UserTable() { return ( <DataTable data={users} columns={columns} actions={actions} searchable onSearchChange={(search) => console.log(search)} currentPage={1} totalPages={10} onPageChange={(page) => console.log(page)} /> ) }

### CrudList

```jsx
```jsx
import { CrudList } from '@kaushalparajuli/react-crud-ui'

function ProductList() { const columns = [ { header: 'Name', accessor: 'name', sortable: true }, { header: 'Price', accessor: 'price', format: (v) => $${v} }, ]

return ( <CrudList title="Products" description="Manage your products" data={products} columns={columns} onCreate={() => navigate('/products/create')} onEdit={(item) => navigate(/products/${item.id}/edit)} onDelete={(item) => deleteProduct(item.id)} itemName="product" /> ) }

### CrudForm

```jsx
```jsx
import { CrudForm } from '@kaushalparajuli/react-crud-ui'

import { z } from 'zod'

const schema = z.object({ name: z.string().min(1, 'Name is required'), price: z.number().min(0, 'Price must be positive'), is_active: z.boolean(), })

const fields = [ { name: 'name', label: 'Name', type: 'text', required: true }, { name: 'price', label: 'Price', type: 'number', required: true }, { name: 'description', label: 'Description', type: 'textarea', colSpan: 2 }, { name: 'is_active', label: 'Active', type: 'switch' }, ]

function ProductForm() { return ( <CrudForm title="Create Product" fields={fields} validationSchema={schema} onSubmit={(data) => console.log(data)} onCancel={() => navigate(-1)} columns={2} /> ) }

### Create CRUD Store with Zustand

```jsx
import { create } from 'zustand'
```jsx
import { createCrudStore } from '@kaushalparajuli/react-crud-ui'

import { apiClient } from './api'

// Create a product store const useProductStore = create( createCrudStore({ name: 'products', apiClient, endpoint: '/api/products', }) )

// Use in component function ProductPage() { const { items, loading, fetchList, create, update, delete: deleteItem, page, setPage, } = useProductStore()

useEffect(() => { fetchList() }, [page])

return ( <CrudList data={items} loading={loading} // ... /> ) }

## Components Reference

### UI Components

| Component | Description |
|-----------|-------------|
| `Button` | Button with variants (default, destructive, outline, secondary, ghost, link) |
| `Card` | Card container with Header, Content, Footer |
| `Badge` | Badge/Tag with variants |
| `Input` | Text input field |
| `Textarea` | Multi-line text input |
| `Select` | Dropdown select |
| `SearchSelect` | Searchable dropdown select |
| `Checkbox` | Checkbox input |
| `Switch` | Toggle switch |
| `Dialog` | Modal dialog |
| `Tabs` | Tab navigation |
| `QTabs` | Simplified tabs |
| `Avatar` | User avatar |
| `Tooltip` | Tooltip |
| `DropdownMenu` | Dropdown menu |
| `Alert` | Alert message |
| `Table` | Table elements |
| `Separator` | Visual separator |
| `Skeleton` | Loading skeleton |
| `ScrollArea` | Custom scrollable area |

### Form Components

| Component | Description |
|-----------|-------------|
| `QInput` | Input with label and error handling |
| `QTextarea` | Textarea with label and error handling |
| `QSelect` | Select with label and error handling |
| `QSearchSelect` | Searchable select with label and error handling |
| `QSwitch` | Switch with label |
| `QCheckbox` | Checkbox with label |
| `QForm` | Form wrapper |

### CRUD Components

| Component | Description |
|-----------|-------------|
| `DataTable` | Data table with sorting, filtering, pagination |
| `CrudList` | Complete CRUD list with actions |
| `CrudForm` | Dynamic form for create/edit |
| `CrudDetail` | Detail view component |
| `Pagination` | Pagination controls |
| `Loading` | Loading indicators |
| `EmptyState` | Empty state displays |
| `Modal` | Modal dialogs |

### Utilities

| Function | Description |
|----------|-------------|
| `cn` | Tailwind class merge utility |
| `formatDate` | Format date string |
| `formatDateTime` | Format datetime string |
| `formatCurrency` | Format currency |
| `debounce` | Debounce function |
| `createCrudStore` | Zustand store factory |

## License

MIT