@delement/ui

v0.9.9-145

Published

5 days ago

TypeScript React UI component library with plugins, utilities, Storybook docs, ESM modules, and SSR-friendly architecture.

0High
0Medium
0Low

delement

ui component library react components react ui library typescript design system ui kit frontend storybook rollup esm ssr localization plugins utilities

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.

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";

React Utilities

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

Constants

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

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

If you want to contribute new features or need some changes please open src folder, run npm install, make your changes and build the library with Rollup via npm run build.

Documentation

See more examples and API at our website.