TypeScript React UI Component Library by Digital Element

DElement UI is a TypeScript-first React UI component library with plugins, shared utilities, and Storybook documentation.

• Installation
• Quick Start
• Features
• Usage
• Documentation
• Contributing

Built for modern front-end applications with:

• ESM-only distribution
• tree-shakable modules
• SSR-friendly architecture
• built-in localization support

Features

• React UI components for production interfaces
• Basic accessibility defaults in core components
• Plugin architecture for DOM and UX workflows
• TypeScript public typings via @delement/ui/typings
• Tree-shakable ESM modules
• SSR-friendly behavior
• Storybook documentation and examples

Why Choose DElement UI?

• React components for common product interfaces
• Plugins for DOM/UX workflows (forms, collections, localization, etc.)
• Utility packages for React, Node, Webpack, and MSW
• Typed public API via @delement/ui/typings
• Ready-to-use styles bundle and per-component style chunks

Installation

npm i @delement/ui

Quick Start

import { Btn } from "@delement/ui/components";

export const App = () => <Btn label={"Submit"} />;

Usage

Components

// from directory
import { Btn, Input, DatePicker, Map, Locale, /* etc */ } from "@delement/ui/components";
// or directly
import { Btn } from "@delement/ui/components/btn";

Plugins

// from directory
import { Collection, Localisation, FormValidation,  /* etc */ } from "@delement/ui/plugins";
// or directly
import { Collection } from "@delement/ui/plugins/collection";

Component/plugin subpaths use wildcard maps in package.json, including nested index modules. For example:

import { BlockTable } from "@delement/ui/components/blockTable";
import { FormSend } from "@delement/ui/plugins/forms";
import type { TLocalisationSource } from "@delement/ui/plugins/localisation/types";

Subcomponents are available on their parent: BlockTable.Body, BlockTable.Caption, BlockTable.Cell, BlockTable.Foot, BlockTable.Head, BlockTable.Row, BlockTable.SortBtn, Grid.Item, Form.Block, Form.Col, Form.Field, Form.Msg and Form.Row. Replace former named imports such as BlockTableBody, GridItem and FormField from the main component entrypoints with the parent import and property access.

React Utilities

// from directory
import { useCN, useIO  /* etc */ } from "@delement/ui/utils/react";
// or directly
import { useCN } from "@delement/ui/utils/react/useCN";

Server HTML

getStaticMarkupForServer returns HTML without automatic pretty-printing in both development and production, for SSG and SSR modes. The before, after and getWithModifier options remain available:

import { getStaticMarkupForServer } from "@delement/ui/utils/react";

const html = await getStaticMarkupForServer(<div>Hello</div>, { mode: "SSR" });
// <!DOCTYPE html><div>Hello</div>

Production output that previously received indentation and line breaks is now compact. Apply any optional formatting in your own tooling. getPrettyHTML is no longer exported from @delement/ui/utils; remove that import from consumer code. Storybook snippets keep their internal HTML formatter.

Constants

import { constants } from "@delement/ui/constants";

Webpack Utilities

getFilesWithContext remains available for loading icons, lazy styles and other modules through import.meta.webpackContext in Webpack applications:

import { getFilesWithContext } from "@delement/ui/utils/webpack";

The direct subpath is also supported:

import { getFilesWithContext } from "@delement/ui/utils/webpack/getFilesWithContext";

Webpack configuration helpers and plugins have been removed from this package.

Styles (Bundle or Per-Component Chunks)

Make sure to add the deUI class to your root <html> element.

// bundle
import styles from "@delement/ui/styles" with { type: "css" };

// or directly for components
import buttonStyles from "@delement/ui/styles/components/btn" with { type: "css" };

Contributing

Use Node.js >=24 and npm.cmd in PowerShell. npm.cmd run lint checks without rewriting files; use npm.cmd run lint::fix for an explicit formatting pass. Run the relevant typecheck::* and tests, then npm.cmd run build::package and npm.cmd run check::package for package output changes. The build does not repeat lint/tests. Storybook build is a separate, explicitly requested check. The published npm package excludes Storybook sources, site output, dependencies and commands.

Documentation

See more examples and API at our website.