Installation

Add dcupl-ui components to your project to build beautiful interfaces quickly.

Prerequisites

Before installing dcupl-ui, make sure you have:

dcupl SDK installed (@dcupl/core)
Node.js >= 18.0.0
A modern JavaScript framework (React, Angular, Vue) or vanilla JavaScript

Install via npm

Install dcupl-ui using your preferred package manager:

npm install @dcupl/ui

yarn add @dcupl/ui

pnpm add @dcupl/ui

Basic Setup

Import and initialize dcupl-ui components in your application:

app.ts

import { DcuplUI } from '@dcupl/ui';
import '@dcupl/ui/styles.css'; // Import default styles

const dcuplUI = new DcuplUI({
  dcupl: dcuplInstance, // Your dcupl instance
  theme: 'light', // Optional: 'light' or 'dark'
});

Framework-Specific Setup

Angular

For Angular projects, import the dcupl-ui module:

app.module.ts

import { DcuplUIModule } from '@dcupl/ui/angular';

@NgModule({
  imports: [DcuplUIModule],
})
export class AppModule {}

React

For React projects, use the React components:

App.tsx

import { DcuplDataGrid } from '@dcupl/ui/react';

function App() {
  return <DcuplDataGrid model="product" />;
}

Vue

For Vue projects, install the Vue plugin:

main.ts

import { DcuplUIPlugin } from '@dcupl/ui/vue';

app.use(DcuplUIPlugin);

Verify Installation

Test your setup by creating a simple data grid:

grid-setup.ts

import { DataGrid } from '@dcupl/ui';

const grid = new DataGrid({
  model: 'product',
  container: document.getElementById('grid'),
});

Next Steps

Documentation for dcupl-ui components is coming soon.