@novahelm/ui-pro

Premium component library for NovaHelm — Kanban boards, Gantt charts, calendars, data grids, dashboard builders, org charts, tree views, flow builders, and theme presets.

License: Premium package. Requires a NovaHelm Pro license.

Quick Start

pnpm add @novahelm/ui-pro

import { KanbanBoard } from "@novahelm/ui-pro";

const columns = [
  { id: "todo", title: "To Do", cards: [{ id: "1", title: "Design homepage" }] },
  { id: "doing", title: "In Progress", cards: [] },
  { id: "done", title: "Done", cards: [] },
];

<KanbanBoard
  columns={columns}
  onCardMove={(cardId, fromCol, toCol) => updateTask(cardId, toCol)}
/>

Components

| Component | Description | |-----------|-------------| | KanbanBoard | Drag-and-drop kanban board with columns and cards | | GanttChart | Timeline-based Gantt chart with dependencies | | Calendar | Month/week/day calendar with event rendering | | DataGrid | High-performance data grid with virtual scrolling | | DashboardBuilder | Drag-and-drop widget dashboard layout | | OrgChart | Organizational hierarchy chart | | TreeView | Collapsible tree with icons and selection | | InfiniteGallery | Virtualized masonry gallery with infinite scroll | | FlowBuilder | Node-and-edge flow diagram editor |

Theme Presets

8 premium theme presets for NovaHelm projects:

import { cyberpunkPreset, noirPreset, proPresets } from "@novahelm/ui-pro";

// Use a preset in your config
const config = defineConfig({
  theme: cyberpunkPreset,
});

// Or browse all presets
console.log(proPresets); // [cyberpunk, gamesrev, glass, noir, synthwave, terminal, brutalist, pastel]

| Preset | Style | |--------|-------| | cyberpunkPreset | Neon accents, dark base | | gamesrevPreset | Gaming-inspired palette | | glassPreset | Frosted glass / glassmorphism | | noirPreset | High-contrast monochrome | | synthwavePreset | Retro 80s gradient palette | | terminalPreset | Green-on-black terminal aesthetic | | brutalistPreset | Bold typography, raw layout | | pastelPreset | Soft pastel color scheme |

Component Registry

Query available pro components at runtime:

import { proComponentRegistry } from "@novahelm/ui-pro";

const components = proComponentRegistry;
// [{ name: "KanbanBoard", category: "project", ... }, ...]

Usage Examples

Gantt Chart

import { GanttChart } from "@novahelm/ui-pro";

<GanttChart
  tasks={[
    { id: "1", name: "Design", start: "2025-01-01", end: "2025-01-15" },
    { id: "2", name: "Build", start: "2025-01-10", end: "2025-02-01", dependencies: ["1"] },
  ]}
  onTaskUpdate={(task) => saveTask(task)}
/>

Data Grid

import { DataGrid } from "@novahelm/ui-pro";

<DataGrid
  columns={[
    { key: "name", header: "Name", sortable: true },
    { key: "email", header: "Email", filterable: true },
    { key: "role", header: "Role" },
  ]}
  data={users}
  onRowClick={(row) => router.push(`/users/${row.id}`)}
/>