BKM Nexus UI Kit

BKM Nexus UI Kit is an enterprise-grade React component library that combines reusable UI components, smart form controls, data visualization, and AI-powered experiences into a single package.

Built with React, TypeScript, and Material UI, it helps teams rapidly develop modern business applications with consistent UI patterns, advanced data-driven components, and plug-and-play AI integrations.

Features

Core Components

• NexusButton
• NexusTextField
• NexusSelect
• NexusMultiSelect
• NexusDialog
• NexusSnackbar
• NexusCard
• NexusDatePicker
• NexusTimePicker
• NexusTransferList
• NexusDataTable

Smart Components

• NexusPasswordField
• NexusSmartTextField
• NexusSmartSelect
• NexusSmartMultiSelect
• NexusSmartDatePicker
• NexusSmartTimePicker
• NexusSmartDataTable

Charts

• NexusLineChart
• NexusBarChart
• NexusPieChart
• NexusAreaChart

AI Components

• NexusAIProvider
• NexusAITextField
• NexusAIAutocomplete
• NexusAIFormAssistant
• NexusAIFilterBuilder
• NexusAIDataTable
• NexusAIChartInsights
• NexusAIDashboard
• NexusAIReportGenerator
• NexusAIWorkflowBuilder
• NexusAIAssistant
• NexusAICopilot

Supported AI Providers

• OpenAI
• Azure OpenAI
• Google Gemini
• Anthropic Claude
• Custom AI Providers

Developer Experience

• React 19 Ready
• TypeScript First
• Material UI 7
• Tree Shakable
• Storybook Documentation
• Vitest Testing
• Enterprise Architecture

Installation

Install package:

npm install bkm-nexus-ui-kit

Install peer dependencies:

npm install \
react \
react-dom \
@mui/material \
@mui/icons-material \
@emotion/react \
@emotion/styled \
@mui/x-date-pickers \
@mui/x-data-grid \
dayjs \
recharts

Quick Start

main.tsx

Wrap your application with NexusProvider.

import ReactDOM from 'react-dom/client'

import {
  NexusProvider
} from 'bkm-nexus-ui-kit'

import App from './App'

ReactDOM.createRoot(
  document.getElementById('root')!
).render(
  <NexusProvider>
    <App />
  </NexusProvider>
)

App.tsx

import {
  RouterProvider
} from 'react-router-dom'

import {
  router
} from './routes/AppRoutes'

function App() {
  return (
    <RouterProvider router={router} />
  )
}

AI Setup

AI Integration Example

1. Install Dependencies

npm install openai

2. Create an OpenAI Provider

// src/ai/OpenAIProvider.ts

import OpenAI from 'openai'

import type {
  AIProvider,
  AIMessage
} from 'bkm-nexus-ui-kit'

export class OpenAIProvider implements AIProvider {

  private client: OpenAI

  constructor(apiKey: string) {
    this.client = new OpenAI({
      apiKey,
      dangerouslyAllowBrowser: true
    })
  }

  async complete(prompt: string): Promise<string> {
    const response =
      await this.client.chat.completions.create({
        model: 'gpt-4o-mini',
        messages: [
          {
            role: 'user',
            content: prompt
          }
        ]
      })

    return response.choices[0]?.message?.content ?? ''
  }

  async chat(
    messages: AIMessage[]
  ): Promise<string> {

    const response =
      await this.client.chat.completions.create({
        model: 'gpt-4o-mini',
        messages
      })

    return response.choices[0]?.message?.content ?? ''
  }
}

3. Create Provider Instance

// src/ai/index.ts

import { OpenAIProvider } from './OpenAIProvider'

export const aiProvider =
  new OpenAIProvider(
    import.meta.env.VITE_OPENAI_API_KEY
  )

4. Register NexusAIProvider

import ReactDOM from 'react-dom/client'

import App from './App'

import {
  NexusAIProvider
} from 'bkm-nexus-ui-kit'

import {
  aiProvider
} from './ai'

ReactDOM.createRoot(
  document.getElementById('root')!
).render(
  <NexusAIProvider
    provider={aiProvider}
  >
    <App />
  </NexusAIProvider>
)

5. Use AI Components

import {
  NexusAIAutocomplete,
  NexusAIAssistant,
  NexusAITextField
} from 'bkm-nexus-ui-kit'

function Example() {
  return (
    <>
      <NexusAITextField
        label="Description"
      />

      <NexusAIAutocomplete
        label="Search"
      />

      <NexusAIAssistant />
    </>
  )
}

Important Notes

• Configure NexusAIProvider only once at the application root.
• Do not wrap the application with a second NexusAIProvider.
• AI components require a valid AIProvider implementation.
• OpenAI usage requires an active API key and available quota.
• A 429 error indicates quota or billing limits have been reached.

Wrap your application with NexusAIProvider to enable AI features.

OpenAI

import {
  NexusAIProvider
} from 'bkm-nexus-ui-kit'

<NexusAIProvider
  provider="openai"
  apiKey={import.meta.env.VITE_OPENAI_API_KEY}
  model="gpt-4o-mini"
>
  <App />
</NexusAIProvider>

Gemini

<NexusAIProvider
  provider="gemini"
  apiKey={import.meta.env.VITE_GEMINI_API_KEY}
  model="gemini-2.5-flash"
>
  <App />
</NexusAIProvider>

Azure OpenAI

<NexusAIProvider
  provider="azure-openai"
  apiKey={import.meta.env.VITE_AZURE_OPENAI_KEY}
  endpoint={import.meta.env.VITE_AZURE_OPENAI_ENDPOINT}
  model="gpt-4o"
>
  <App />
</NexusAIProvider>

Anthropic Claude

<NexusAIProvider
  provider="anthropic"
  apiKey={import.meta.env.VITE_ANTHROPIC_API_KEY}
  model="claude-sonnet-4"
>
  <App />
</NexusAIProvider>

Basic Example

import {
  NexusButton
} from 'bkm-nexus-ui-kit'

function App() {
  return (
    <NexusButton
      loading
      loadingText="Saving User..."
    >
      Save
    </NexusButton>
  )
}

Core Components

Button

<NexusButton
  variant="contained"
>
  Save
</NexusButton>

TextField

<NexusTextField
  label="Username"
/>

Select

<NexusSelect
  label="Country"
  value={country}
  options={[
    {
      label: 'India',
      value: 'IN'
    },
    {
      label: 'USA',
      value: 'US'
    }
  ]}
  onChange={setCountry}
/>

MultiSelect

<NexusMultiSelect
  label="Skills"
  value={skills}
  options={[
    {
      label: 'React',
      value: 'react'
    },
    {
      label: 'TypeScript',
      value: 'typescript'
    }
  ]}
  onChange={setSkills}
/>

Dialog

<NexusDialog
  open={open}
  title="Delete User"
  onClose={() =>
    setOpen(false)
  }
  onConfirm={handleDelete}
>
  Are you sure?
</NexusDialog>

Snackbar

<NexusSnackbar
  open={open}
  severity="success"
  message="User saved successfully"
/>

Card

<NexusCard
  title="User Information"
>
  Content goes here
</NexusCard>

DatePicker

<NexusDatePicker
  label="Start Date"
  value={date}
  onChange={setDate}
/>

TimePicker

<NexusTimePicker
  label="Meeting Time"
  value={time}
  onChange={setTime}
/>

TransferList

<NexusTransferList
  availableItems={availableItems}
  selectedItems={selectedItems}
  onChange={setSelectedItems}
/>

DataTable

<NexusDataTable
  title="Users"
  rows={rows}
  columns={columns}
  searchable
  checkboxSelection
/>

Charts

LineChart

<NexusLineChart
  data={data}
  dataKey="sales"
  xAxisKey="month"
/>

BarChart

<NexusBarChart
  data={data}
  dataKey="sales"
  xAxisKey="month"
/>

PieChart

<NexusPieChart
  data={data}
  dataKey="value"
/>

AreaChart

<NexusAreaChart
  data={data}
  dataKey="sales"
  xAxisKey="month"
/>

Smart Components

Smart components provide enhanced UX capabilities beyond standard UI controls.

PasswordField

Features:

• Password visibility toggle
• Password strength indicator

<NexusPasswordField
  label="Password"
  value={password}
  onChange={handleChange}
/>

SmartTextField

Features:

• Email validation
• URL validation
• Phone validation
• Character counter
• Auto-trim support

<NexusSmartTextField
  label="Email"
  validation="email"
  value={email}
  onChange={handleChange}
/>

SmartSelect

Features:

• Searchable dropdown
• Async-friendly
• Loading state

<NexusSmartSelect
  label="Country"
  value={country}
  options={options}
  loading={loading}
  onChange={setCountry}
/>

SmartMultiSelect

Features:

• Search
• Select All
• Chips display
• Maximum selection limit

<NexusSmartMultiSelect
  label="Skills"
  value={skills}
  options={options}
  maxSelections={5}
  showSelectAll
  onChange={setSkills}
/>

SmartDatePicker

Features:

• Today shortcut
• Yesterday shortcut
• Last 7 Days shortcut
• Weekend restriction
• Date range restriction

<NexusSmartDatePicker
  label="Date"
  value={date}
  disableWeekends
  onChange={setDate}
/>

SmartTimePicker

Features:

• Now shortcut
• Noon shortcut
• Business hours restriction
• Minute interval support

<NexusSmartTimePicker
  label="Time"
  value={time}
  businessHoursOnly
  minuteStep={15}
  onChange={setTime}
/>

SmartDataTable

Features:

• Global search
• CSV export
• Column visibility management
• Enhanced filtering

<NexusSmartDataTable
  title="Employees"
  rows={rows}
  columns={columns}
  searchable
  exportable
/>

AI Architecture Section

AI components are not just chat widgets—they transform unstructured natural language into structured application data.

How AI Components Work

All AI components in BKM Nexus UI Kit follow the same architecture:

User Input -> Nexus AI Component -> AI Service -> AI Provider -> OpenAI / Gemini / Claude -> Structured Response -> Component Action

AI Component with Business Use Cases

NexusAIAutocomplete

Input: React

Output: React Hooks React Query React Router React Context React Testing Library

NexusAIFilterBuilder

Input: Show critical incidents created last week

Output: [ { "field": "severity", "operator": "=", "value": "Critical" }, { "field": "createdDate", "operator": ">=", "value": "Last Week" } ]

NexusAIReportGenerator

Input: Generate a weekly sales summary

Output: Weekly Sales Report

Revenue increased by 12% Top region: South India Best performing product: Premium Plan

NexusAIWorkflowBuilder

Input: Create an employee onboarding workflow

Output:

1. Create Employee Record
2. Provision Email Account
3. Assign Equipment
4. Manager Approval
5. Training Completion

NexusAICopilot

Input: How can I reduce cloud costs?

Output:

• Identify idle resources
• Enable auto scaling
• Use reserved instances
• Optimize storage tiers

AI Components

NexusAITextField

• AI-assisted text generation.

<NexusAITextField
  label="Description"
/>

NexusAIAutocomplete

• AI-powered autocomplete suggestions.

 <NexusAIAutocomplete
  label="Search"
/>

NexusAIFormAssistant

• Extract structured form data from natural language.

 <NexusAIFormAssistant
  fields={[
    {
      name: 'title',
      label: 'Title',
      type: 'text'
    }
  ]}
/>

NexusAIFilterBuilder

• Generate filters using natural language.

<NexusAIFilterBuilder
  fields={fields}
/>

NexusAIDataTable

• AI summaries and insights for data tables.

<NexusAIDataTable
  rows={rows}
  columns={columns}
/>

NexusAIChartInsights

• Generate AI chart analysis.

<NexusAIChartInsights
  data={chartData}
/>

NexusAIDashboard

• Generate dashboard summaries.

<NexusAIDashboard
  metrics={metrics}
/>

NexusAIReportGenerator

• Generate reports using AI.

<NexusAIReportGenerator />

NexusAIWorkflowBuilder

• Generate workflows from prompts.

<NexusAIWorkflowBuilder  />

NexusAIAssistant

• Enterprise AI assistant.

<NexusAIAssistant   />

NexusAICopilot

• Context-aware AI copilot.

<NexusAICopilot    />

TypeScript Support

All components are fully typed.

import type {
  TransferListItem,
  NexusDataTableColumn
} from 'bkm-nexus-ui-kit'

Storybook

Run Storybook locally:

npm run storybook

Build Storybook:

npm run build-storybook

Testing

Run tests:

npm run test

Run coverage:

npm run test:coverage

Requirements

• React 19+
• Material UI 7+
• TypeScript 5+
• Day.js
• Recharts

Roadmap

v0.4.x

• AI Form Builder
• AI Query Builder
• AI Dashboard Designer
• AI Data Explorer

v0.5.x

• Workflow Designer
• Dynamic Form Engine
• Theme Builder

v1.0.0

• Enterprise Design System
• Visual App Builder
• AI Agent Framework
• Full AI UX Platform

Why BKM Nexus UI Kit?

• Consistent UI across projects
• Enterprise-ready architecture
• Fully typed with TypeScript
• Built on Material UI
• Tested and documented
• Future-ready for AI-powered experiences

License

MIT License

• One thing I would additionally add before publishing the next npm version is a "Live Showcase" section at the top pointing to your Nexus Showcase App URL once it's deployed, because that becomes the primary way users evaluate the package.