# TypeScript React UI Component Library by Digital Element [![npm version](https://img.shields.io/npm/v/@delement/ui)](https://www.npmjs.com/package/@delement/ui) [![npm downloads](https://img.shields.io/npm/dm/@delement/ui)](https://www.npmjs.com/package/@delement/ui) [![license](https://img.shields.io/npm/l/@delement/ui)](./LICENSE) **DElement UI** is a TypeScript-first React UI component library with plugins, shared utilities, and Storybook documentation. - [Installation](#installation) - [Quick Start](#quick-start) - [Features](#features) - [Usage](#usage) - [Documentation](#documentation) - [Contributing](#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 ```bash npm i @delement/ui ``` ## Quick Start ```tsx import { Btn } from "@delement/ui/components"; export const App = () => ; ``` ## Usage ### Components ```ts // from directory import { Btn, Input, DatePicker, Map, Locale, /* etc */ } from "@delement/ui/components"; // or directly import { Btn } from "@delement/ui/components/btn"; ``` ### Plugins ```ts // from directory import { Collection, Localisation, FormValidation, /* etc */ } from "@delement/ui/plugins"; // or directly import { Collection } from "@delement/ui/plugins/collection"; ``` ### React Utilities ```ts // from directory import { useCN, useIO /* etc */ } from "@delement/ui/utils/react"; // or directly import { useCN } from "@delement/ui/utils/react/useCN"; ``` ### Constants ```ts import { constants } from "@delement/ui/constants"; ``` ### Styles (Bundle or Per-Component Chunks) Make sure to add the `deUI` class to your root `` element. ```ts // 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](https://ui.d-element.ru).