# @gechiui/components > UI components for GeChiUI. Latest version **19.2.3** (published 2022-04-08) · GPL-2.0-or-later license · 0 weekly downloads ## Install ```sh npm install @gechiui/components pnpm add @gechiui/components yarn add @gechiui/components bun add @gechiui/components ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 19.2.3 | | Published | 2022-04-08 | | First published | 2022-03-17 | | Weekly downloads | 0 | | License | GPL-2.0-or-later | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=12 | | Dependencies | 38 | | Unpacked size | 12.9 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | The GeChiUI Contributors | | Maintainers | gechiui | | Keywords | gechiui, gutenberg, components | ## Links - npm: https://www.npmjs.com/package/@gechiui/components - Repository: https://github.com/GeChiUI/gutenberg - Homepage: https://github.com/GeChiUI/gutenberg/tree/HEAD/packages/components/README.md - Issues: https://github.com/GeChiUI/gutenberg/issues - npm.io page: https://npm.io/package/@gechiui/components ## Dependencies (38) - [uuid](https://npm.io/package/uuid.md) ^8.3.0 - [colord](https://npm.io/package/colord.md) ^2.7.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [memize](https://npm.io/package/memize.md) ^1.1.0 - [moment](https://npm.io/package/moment.md) ^2.22.1 - [reakit](https://npm.io/package/reakit.md) ^1.3.8 - [rememo](https://npm.io/package/rememo.md) ^3.0.0 - [downshift](https://npm.io/package/downshift.md) ^6.0.15 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [react-dates](https://npm.io/package/react-dates.md) ^17.1.1 - [@emotion/css](https://npm.io/package/@emotion/css.md) ^11.1.3 - [@gechiui/dom](https://npm.io/package/@gechiui/dom.md) ^3.2.7 - [re-resizable](https://npm.io/package/re-resizable.md) ^6.4.0 - [@gechiui/a11y](https://npm.io/package/@gechiui/a11y.md) ^3.2.4 - [@gechiui/date](https://npm.io/package/@gechiui/date.md) ^4.2.3 - [@gechiui/i18n](https://npm.io/package/@gechiui/i18n.md) ^4.2.4 - [framer-motion](https://npm.io/package/framer-motion.md) ^4.1.17 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.0 - [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.4.0 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.4.1 - [@emotion/utils](https://npm.io/package/@emotion/utils.md) 1.0.0 - [@gechiui/hooks](https://npm.io/package/@gechiui/hooks.md) ^3.2.2 - [@gechiui/icons](https://npm.io/package/@gechiui/icons.md) ^6.1.1 - [react-colorful](https://npm.io/package/react-colorful.md) ^5.3.1 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0 - [gradient-parser](https://npm.io/package/gradient-parser.md) ^0.1.5 - [@gechiui/compose](https://npm.io/package/@gechiui/compose.md) ^5.0.7 - [@gechiui/element](https://npm.io/package/@gechiui/element.md) ^4.0.4 - [@gechiui/warning](https://npm.io/package/@gechiui/warning.md) ^2.2.2 - [@gechiui/keycodes](https://npm.io/package/@gechiui/keycodes.md) ^3.2.4 - [react-use-gesture](https://npm.io/package/react-use-gesture.md) ^9.0.0 - [@gechiui/rich-text](https://npm.io/package/@gechiui/rich-text.md) ^5.0.8 - [react-resize-aware](https://npm.io/package/react-resize-aware.md) ^3.1.0 - [@gechiui/deprecated](https://npm.io/package/@gechiui/deprecated.md) ^3.2.3 - [@gechiui/primitives](https://npm.io/package/@gechiui/primitives.md) ^3.0.4 - [dom-scroll-into-view](https://npm.io/package/dom-scroll-into-view.md) ^1.2.1 - [highlight-words-core](https://npm.io/package/highlight-words-core.md) ^1.2.2 - [@gechiui/is-shallow-equal](https://npm.io/package/@gechiui/is-shallow-equal.md) ^4.2.1 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 19.2.3 (latest) — 2022-04-08 - 19.4.0 — 2022-03-17 - 19.2.2 — 2022-03-17 ## README # Component Reference This package includes a library of generic GeChiUI components to be used for creating common UI elements shared between screens and features of the GeChiUI dashboard. ## Installation Install the module ```bash npm install @gechiui/components --save ``` _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@gechiui/babel-preset-default`](https://github.com/GeChiUI/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._ ## Usage Within Gutenberg, these components can be accessed by importing from the `components` root directory: ```jsx /** * GeChiUI dependencies */ import { Button } from '@gechiui/components'; export default function MyButton() { return ; } ``` Many components include CSS to add style, you will need to add in order to appear correctly. Within GeChiUI, add the `gc-components` stylesheet as a dependency of your plugin's stylesheet. See [gc_enqueue_style documentation](https://developer.gechiui.com/reference/functions/gc_enqueue_style/#parameters) for how to specify dependencies. In non-GeChiUI projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@gechiui/components/build-style/style.css`.

Code is Poetry.

## Docs & examples You can browse the components docs and examples at https://gechiui.github.io/gutenberg/ ## Contributing See [CONTRIBUTING.md](/packages/components/CONTRIBUTING.md) for the contributing guidelines for the `@gechiui/components` package. --- _Source: https://npm.io/package/@gechiui/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._