@ballistix.digital/react-components NPM

BallistiX React Component Library Documentation

1. Introduction

A repo as library to easily build, test and internally use standardized React.js components across multiple projects.

1.2 Features

Fully responsive components out of the box.
Ability to fully customize a component's styling.

2. Usage

This library assumes you have worked with React.js before. If that is not the case, it is recommended you go trough React.js' Getting Started Course first. This project is written in TypeScript. If you are not familiar with TypeScript, learn it. It wil improve your life dramatically.

2.1 Installation

In order to start using the BallistiX Component Library in your project, you will need to add it as a dependency to your project. To add the library to your project, run:

yarn add @ballistix/react-components

That's it. You're all set and done. To import components you can do so using following import statement:

import ButtonElement from '@ballistix/react-components/elements/Button';

For a fully listed overview of available components and their props and states, please visit https://layeredprints.github.io/react-components.

3. Contributing

3.1 Requirements

To run this project you will need to have some tools and dependencies installed:

Git - For cloning this project as a template to your machine, and use as your own.
Node.js - For running Next.js and tools in this project.
Node Package Manager (NPM) / Yarn - For installing dependencies.

3.2 Quickstart

To run the project you must first clone it as a template onto your machine. You can do this by navigating in a terminal to a location you are comfortable downloading the project in, and running:

git clone https://github.com/layeredprints/react-components/

After that, you must navigate into the project's folder and install the dependencies with Node Package Manager or Yarn.

cd react-components && yarn

Once all dependencies are installed you should be able to start up a development server.

yarn storybook

Now visit http://localhost:6006/ to open the Storybook. Congratulations, you are now ready to start building a components!

4. Resources

React - A JavaScript library for building user interfaces.
Tailwind CSS - A utility-first CSS framework packed with standardized classes for easy styling.
Tailwind UI - A library with pre-build and styled responsive components.
TanStack - High-quality open-source software for web developers.