# tribe-react-component

> TLDR - React component library boilerplate. A step-by-step instructions for creating a react component library using React and Vite. Also includes Storybook for component building/testing.

Latest version **0.0.0** (published 2024-04-09) · 0 weekly downloads

## Install

```sh
npm install tribe-react-component
pnpm add tribe-react-component
yarn add tribe-react-component
bun add tribe-react-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2024-04-09 |
| First published | 2024-04-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jacksontribe |

## Links

- npm: https://www.npmjs.com/package/tribe-react-component
- npm.io page: https://npm.io/package/tribe-react-component

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [react-aria](https://npm.io/package/react-aria.md) ^3.32.1
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.365.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.2.2
- [tailwind-variants](https://npm.io/package/tailwind-variants.md) ^0.2.1
- [react-aria-components](https://npm.io/package/react-aria-components.md) ^1.1.1
- [@vitejs/plugin-react-swc](https://npm.io/package/@vitejs/plugin-react-swc.md) ^3.6.0

## Recent versions

- 0.0.0 (latest) — 2024-04-09

## README

# Introduction
TLDR - React component library boilerplate. 
A step-by-step instructions for creating a react component library using React and Vite.
Also includes Storybook for component building/testing.

# Boilerplate project creation
1. Creates a React Vite project called react-component
> npm create vite react-component --template react-tsx

2. Installs the dependencies
> npm install

3. After creating the project, delete unnecessary files like below, because we don’t need to run the project.
- App.tsx
- App.css
- main.tsx
- index.html
- vite-env-d.ts (if you have .env files, you need to keep it.)

4. Renamed ‘src’ directory to ‘lib’ and ensure it has ‘index.tsx’ file in the ‘lib’ directory to export a specific component. Let’s create it in the ‘lib’ directory.

5. Installs Tailwind and runs init
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

6. Update tailwind.config.js

```
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./lib/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

# References
https://medium.com/@mevlutcantuna/building-a-modern-react-component-library-a-guide-with-vite-typescript-and-tailwind-css-862558516b8d

---
_Source: https://npm.io/package/tribe-react-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._