nexprime

NexPrime: one premium UI system for every framework. 60+ components for Angular and, as Web Components, for React, Next.js, Vue, Svelte and plain HTML: forms, tables, charts, dialogs, menus, chat, onboarding tours, background effects, a Lottie player, 2,0
558
vue react menu svelte angular charts dialog lucide icons forms ssr lottie design-system component-library wysiwyg theme
Install
npm install nexprime
Latest Version:0.1.5
Vue:3
License:MIT
Last Updated:Oct 13, 2026
Links: npm
Maintainer: salmanali097

nexprime

NexPrime: one premium UI system for every framework. 60+ components (forms, tables, charts, dialogs, menus, chat, onboarding tours, background effects, Lottie), 2,000+ icons, CSS animations and a light/dark theme.

Docs and live demos: nexprime-dev.vercel.app

  • Angular, React, Next.js, Vue, Svelte and plain HTML: the same components everywhere, as Web Components outside Angular (<np-button>, <np-chart>, …).

Dark mode: set data-theme="dark" on <html>.

Angular

npm i nexprime

  1. Theme, in src/styles.css:

    @import 'nexprime/styles/theme.css';

  2. Icons, in angular.json under build.options.assets (served at /icons, where <np-icon> looks for them):

    { "glob": "**/*.svg", "input": "node_modules/nexprime/icons", "output": "icons" }

    Optional, the bundled Lottie animations: { "glob": "**/*.json", "input": "node_modules/nexprime/lottie", "output": "lottie" }

  3. Use:

    import { Component } from '@angular/core';
import { ButtonComponent, IconComponent } from 'nexprime';

@Component({
  selector: 'app-root',
  imports: [ButtonComponent, IconComponent],
  template: `
    <np-button primary label="Save" />
    <np-icon name="house" />
  `,
})
export class App {}

React and Next.js

npm i nexprime

Angular is bundled inside the Web Components; you don't install it.

// main.tsx (Next.js: app/layout.tsx)
import 'nexprime/styles/theme.css';

'use client'; // Next.js only
import { useState } from 'react';
import { NpButton, NpChart, NpIcon, setIconsUrl } from 'nexprime/react';

setIconsUrl('https://cdn.jsdelivr.net/npm/nexprime/icons/'); // or copy node_modules/nexprime/icons to public/icons

const datasets = [{ label: 'Sales', data: [120, 150, 170] }];

export function Dashboard() {
  const [saved, setSaved] = useState(0);
  return (
    <>
      <NpButton primary label={`Saved ${saved}`} onclicked={() => setSaved((n) => n + 1)} />
      <NpChart type="bar" labels={['Q1', 'Q2', 'Q3']} datasets={datasets} />
      <NpIcon name="rocket" size="32" />
    </>
  );
}
  • React components are imported directly from 'nexprime/react' (<NpButton>, <NpChart>, <NpTable>, etc.).
  • Props, data arrays and objects are passed directly (labels={...}, datasets={...}).
  • Custom events use on<event> callbacks (onclicked, onselectionChange, onrowClick), receiving the event with e.detail.
  • Elements load in the browser only (safe with Next.js SSR and React 18/19 hydration).

Vue 3

npm i nexprime

// vite.config.ts
vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('np-') } } });

// main.ts
import 'nexprime/styles/theme.css';
import 'nexprime/elements';
window.NEXPRIME_ICONS_URL = 'https://cdn.jsdelivr.net/npm/nexprime/icons/';

<template>
  <np-chart type="bar" :labels="labels" :datasets="datasets" />
  <np-button primary label="Save" @clicked="save" />
  <np-select :options="options" :value="city" @value-change="city = $event.detail" />
</template>

Vue passes arrays and objects as properties. Use kebab-case event names (@value-change).

Plain HTML (no build step)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexprime/styles/theme.css" />
<script>
  window.NEXPRIME_ICONS_URL = 'https://cdn.jsdelivr.net/npm/nexprime/icons/';
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/nexprime/elements/nexprime.js"></script>

<np-button primary label="Save"></np-button>
<np-chart id="sales" type="bar"></np-chart>

<script type="module">
  await customElements.whenDefined('np-chart');
  const chart = document.querySelector('#sales');
  chart.labels = ['Q1', 'Q2', 'Q3'];
  chart.datasets = [{ label: 'Sales', data: [120, 150, 170] }];
  document.querySelector('np-button').addEventListener('clicked', () => alert('Saved'));
</script>

Web Component rules (React, Vue, HTML)

  • Tag names are the Angular selectors: <np-form>, <np-chart>, <np-voice-chat>.
  • Strings, numbers and booleans can be kebab-case attributes: num-visible="3", card, submit-label="Send".
  • Arrays, objects and functions must be set as properties (el.fields = [...]).
  • Outputs are DOM events with the output's name; camelCase ones are also sent in kebab-case (valueChange and value-change). The value is event.detail.
  • Confirm dialogs: put <np-confirm-dialog> on the page and call window.NexPrime.confirm({ header, message, accept }).
  • A nexprime:ready event fires on window once every element is registered.

Related Packages

kanto-ds

Eighty accessible web components for dashboards, admin tools and forms — themeab...

2,229
angular custom-elements dark-mode data-table design-system forms react svelte ui-kit vue +11
@abelfuentes/ui-controls

Componentes UI atómicos como Web Components. Sin dependencias; funcionan en Reac...

1,057 0
component-library custom-elements dark-mode design-system react svelte ui-library vue web-components accessible +4
@parthi033/ui-foundation

A lightweight, framework-agnostic Web Components library built with Stencil

2,287 1
angular component-library custom-elements dark-mode design-system react ui-library vue web-components accessible +5
pelagic

Pelagic UI in one package: 150+ accessible, themeable components for React, Vue,...

181 0
angular charts component-library dark-mode design-system icons react svelte ui-library vue +13
@awc-ui/core

Accessible Material Design 3 Web Components for React, Angular, Vue, and Svelte,...

3,739 21
angular-components charts component-library custom-elements dark-mode design-system forms nextjs ssr ui-library +27

Version History

Version Released Vue License
0.1.5 >=3.3 MIT
0.1.4 >=3.3 MIT
0.1.3 >=3.3 MIT
0.1.2 MIT
0.1.1 MIT
Pre-releases (1)
Version Released License
0.0.0-stage