CodingMonkeyLabs WebUI Commons - A comprehensive React component library with reusable components, hooks, utilities, and design system
npm install cml-webui-commons
CodingMonkeyLabs WebUI Commons - A comprehensive React component library with authentication, styling, and common utilities. Build modern web applications with a production-ready component library and design system.
- šØ Premium Design System - "Luminous Excellence" design system with SCSS and Tailwind CSS
- š Authentication System - Complete auth flow with JWT, RBAC, and permission management
- š§© Reusable Components - Layout, Modal, Form, and UI components
- šŖ Custom Hooks - useAuth, usePermission, useRole, and more
- š¦ State Management - Zustand stores for auth and theme
- š Dark Mode - Built-in theme switching with Light, Dark, and Neon themes
- š§ TypeScript - Fully typed with TypeScript
- ā
Validation - Zod schemas for form validation
- šÆ API Client - Configurable Axios client factory with interceptors and token refresh
- ā»ļø Generic & Reusable - Framework-agnostic utilities and helpers
``bash`
npm install cml-webui-commons
Import the styles in your main entry file:
`typescript`
import 'cml-webui-commons/styles'
Extend your Tailwind configuration with the preset:
`javascript
// tailwind.config.js
import { tailwindPreset } from 'cml-webui-commons/tailwind-preset'
export default {
presets: [tailwindPreset],
content: [
"./index.html",
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/cml-webui-commons/dist/*/.js",
],
}
`
Wrap your app with the AuthProvider:
`typescript
import { AuthProvider } from 'cml-webui-commons'
function App() {
return (
{/ Your app content /}
)
}
`
`typescript
import { Layout, Header, Sidebar, Modal, AuthGuard } from 'cml-webui-commons'
function Dashboard() {
return (
)
}
`
Create your API clients with the configurable factory:
`typescript
import { createApiClient } from 'cml-webui-commons'
// Create a client for your API
const apiClient = createApiClient({
baseURL: 'https://api.example.com/v1',
refreshTokenUrl: 'https://api.example.com/v1/auth/refresh',
timeout: 30000,
onUnauthorized: () => {
// Custom handler for 401 responses
console.log('Unauthorized! Redirecting...')
}
})
// Use the client
const response = await apiClient.get('/users')
const user = await apiClient.post('/users', { name: 'John Doe' })
`
#### API Client Features
- ā
Automatic bearer token injection from auth store
- ā
Automatic token refresh on 401 responses
- ā
Custom unauthorized handler
- ā
Configurable timeout and headers
- ā
TypeScript support with exported types
typescript
import {
// Layout Components
Layout,
PageLayout,
Header,
Sidebar, // Auth Components
LoginPage,
AuthGuard,
// Modals
Modal,
AssignRoleModal,
AssignPermissionModal,
// UI Security Components
PasswordStrengthIndicator,
RoleBadge,
RoleCard,
PermissionChip,
UserStatusBadge,
UserCard,
UserTableRow,
} from 'cml-webui-commons'
`$3
typescript
import {
useAuth,
usePermissions,
useRoles,
useUsers,
} from 'cml-webui-commons'
`$3
typescript
import {
createApiClient,
type ApiClientConfig,
type AxiosInstance,
type AxiosResponse,
type AxiosError,
} from 'cml-webui-commons'
`$3
typescript
import {
useAuthStore,
useThemeStore,
} from 'cml-webui-commons'
`$3
typescript
import { cn } from 'cml-webui-commons'// Merge class names
const className = cn('base-class', condition && 'conditional-class', 'another-class')
`Documentation
For detailed documentation, see the docs folder:
- Components Guide
- Design System
- Authentication Flow
- API Patterns
Package Structure
cml-webui-commons/
āāā components # React components
āāā hooks # Custom React hooks
āāā services # API services and client
āāā stores # Zustand stores
āāā contexts # React contexts
āāā types # TypeScript types
āāā schemas # Zod validation schemas
āāā utils # Utility functions
āāā styles # SCSS and Tailwind preset
Examples
$3
typescript
import { useThemeStore } from 'cml-webui-commons'function ThemeToggle() {
const { theme, toggleTheme } = useThemeStore()
return (
)
}
`$3
typescript
import { useAuth } from 'cml-webui-commons'function UserProfile() {
const { user, logout } = useAuth()
return (
Welcome, {user?.name}
)
}
`$3
typescript
import { AuthGuard } from 'cml-webui-commons'function AdminPage() {
return (
Admin Only Content
)
}
``- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- React 18.0.0 or 19.0.0
- React DOM 18.0.0 or 19.0.0
- React Router DOM 6.0.0 or 7.0.0
- Node.js >= 20.0.0
- npm >= 10.0.0
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
MIT Ā© CodingMonkeyLabs
CodingMonkeyLabs
- GitHub: @codingmonkeylabs
See CHANGELOG.md for version history and updates.