# cryptofi-component-library > CryptoFi LLC.'s component library for in-house use in React based applications. Latest version **1.2.0** (published 2023-10-26) · MIT license · 0 weekly downloads ## Install ```sh npm install cryptofi-component-library pnpm add cryptofi-component-library yarn add cryptofi-component-library bun add cryptofi-component-library ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2023-10-26 | | First published | 2023-07-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 12 | | Unpacked size | 493.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | CryptoFi LLC. | | Maintainers | cryptofi | ## Links - npm: https://www.npmjs.com/package/cryptofi-component-library - Repository: https://github.com/CryptoFi-LLC/cryptofi-component-library - Homepage: https://github.com/CryptoFi-LLC/cryptofi-component-library#readme - Issues: https://github.com/CryptoFi-LLC/cryptofi-component-library/issues - npm.io page: https://npm.io/package/cryptofi-component-library ## Dependencies (12) - [tsc](https://npm.io/package/tsc.md) ^2.0.4 - [react](https://npm.io/package/react.md) ^18.2.0 - [latest](https://npm.io/package/latest.md) ^0.2.0 - [ts-node](https://npm.io/package/ts-node.md) ^10.9.1 - [webpack](https://npm.io/package/webpack.md) ^5.88.2 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [storybook](https://npm.io/package/storybook.md) ^7.4.0 - [ts-loader](https://npm.io/package/ts-loader.md) ^9.4.4 - [css-loader](https://npm.io/package/css-loader.md) ^6.8.1 - [typescript](https://npm.io/package/typescript.md) 5.0.4 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.16.0 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.9 ## Recent versions - 1.2.0 (latest) — 2023-10-26 - 1.1.1 — 2023-10-02 - 1.1.0 — 2023-08-06 - 1.0.5 — 2023-08-03 - 1.0.4 — 2023-08-02 - 1.0.3 — 2023-08-02 - 1.0.1 — 2023-07-28 ## README # ![typography=false](https://github.com/CryptoFi-LLC/cryptofi-component-library/assets/20016200/7488d59e-a68c-49e4-ab7a-3ad4294fcf3c) / CryptoFi Component Library v1.2.0 Welcome to the CryptoFi Component Library! This library contains a set of reusable React components designed for various applications within CryptoFi. --- ## Getting Started To run the CryptoFi Component Library locally and explore its components using Storybook, follow the steps below: --- ### Clone the Repository You can clone the repository from GitHub using the following command: ```bash git clone https://github.com/CryptoFi-LLC/cryptofi-component-library.git ``` ### Install Dependencies Navigate to the project directory in your terminal (use `cd cryptofi-component-library`) and install all required dependencies using the following command: ```bash yarn install ``` --- ### Run Storybook to test components After installing the dependencies, start the Storybook UI by running the following command: ```bash yarn storybook ``` This will open the Storybook UI in your default browser, accessible at `http://localhost:6006`. The Storybook UI serves as documentation for the various components in the CryptoFi Component Library. It allows you to interact with and test the components, while also providing details about the available options for each component. --- ### Test components within other projects (local) If you wish to test the components locally within your repo without having to install the npm package and depend on the latest package upload, you can do so by running the next two commands: ```bash yarn build && yarn pack ``` This will create a package file containing the entire library, to then be placed within the project's root folder and be called for on the project's *package.json* like this: ```bash "cryptofi-component-library": "file:./cryptofi-component-library-vX.X.X.tgz", ``` Make sure that you're calling the correct path for the file. Once you've done that, you can yarn install on the project, which will trigger the library to install on the project, therefore making any component callable within any project file like this: ```bash import { AnyComponent } from 'cryptofi-component-library' ``` --- ### Test components within other projects To test the library or directly use it, add the library package to the project's repository by running this command: ```bash yarn add cryptofi-component-library@latest ``` And then importing any component from the library: ```bash import { AnyComponent } from 'cryptofi-component-library' ``` --- ## Components The CryptoFi Component Library currently includes the following components: ### Atoms - `Button:` A group of customizable button components that can be used throughout your React applications. (**PrimaryButton, SecondaryButton, TertiaryButton, AlertButton & PlainButton**) - `Typography:` A set of two typography elements to maintain consistent text styling. (**Content** *small/default*, **Title** *small/default/large*) - `Icon:` An icon library for adding visual elements to your UI. ### Molecules - `Accordion:` A versatile accordion component for organizing content and reducing clutter. - `Navigation:` The Navigation component is a versatile sidebar navigation that can adapt to different screen sizes. - `Notification / Banner:` The Banner component is used to display various types of banners with optional actions. #### Layout - `Topbar:` The Topbar component is a simple user interface element that is typically placed at the top of a web or mobile application. - `Bottombar:` These are meant to be used in full page layouts, smaller items, modals, etc. - `Empty State:` This component is meant to be used within any error page, empty page or congratulations sections. - `Wrapper:` These are meant to be used in full page layouts and smaller items to keep content consistently housed within containers. #### Form These are meant to be used in form groups as well as individually, depending the case scenario. - `Textfield` - `Select` - `Checkbox` - `Toggle` #### Helpers - `Pills:` The Pill component is a versatile UI element for displaying content in a pill-shaped container. - `Tooltip:` The Navigation component is a versatile sidebar navigation that can adapt to different screen sizes. --- > Note: The current version of the CryptoFi Component Library is focused on providing a limited number of components. We are currently focused on the testing of the library. # ![typography=false](https://github.com/CryptoFi-LLC/cryptofi-component-library/assets/20016200/7488d59e-a68c-49e4-ab7a-3ad4294fcf3c) --- _Source: https://npm.io/package/cryptofi-component-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._