This component library is a lightweight, efficient, and customizable set of React components designed for web development. Built with a focus on performance and scalability, the library is packaged using tsup to ensure optimized output for both CommonJS (CJS) and ESModules (ESM). It includes TypeScript type declarations and minification for reduced bundle sizes.

Run the npm Package Locally

Follow these steps to build, pack, and install the local npm package in another repository.

1️⃣ Create Build with Updated Code

Run the build command inside the package project:

pnpm build

2️⃣ Check if .tgz File Is Created

After the build, verify whether a .tgz file (for example aether-components-0.0.1.tgz) exists in version folder of the project root.

• If the file exists → skip to Step 4
• If the file does NOT exist → continue to Step 3

3️⃣ Generate the .tgz Package

Run the following command to create the tarball package if not created the .tgz file:

pnpm pack

This will generate a file like:

aether-components-0.0.1.tgz

4️⃣ Go to Another Local Repository

Navigate to the project where you want to use this package:

cd /path/to/your/other-repo

5️⃣ Install the Local Package

Install the generated .tgz file using npm or pnpm:

pnpm install /path/to/aether-components-0.0.1.tgz

or

npm install /path/to/aether-components-0.0.1.tgz

✅ Done

You can now import and use the package normally inside the project.

import { ComponentName } from "aether-components";

Key Features Optimized Build Configuration: Tree-shaking enabled for unused code elimination. Builds for both ESM and CJS formats. Minification of identifiers, syntax, and whitespace for compact bundles. Generates TypeScript declaration files (.d.ts) for strong type support. Includes sourcemaps for easier debugging.

Platform Support: Built for browser environments. Externalizes dependencies like react and react-dom to reduce bundle size.

Available Components:-

BaseButton A button component supporting various styles and interactions.

Audio A customizable audio player for embedding audio content.

CarouselComponent A responsive carousel for showcasing images or content.

FlipCard An interactive card component with flip animations.

Form A flexible form component for building user inputs and validations.

Text A typography component for managing text styles.

Video A robust video player for embedding video content.

TypingIndicator A live indicator for chat or messaging applications.

Image A responsive image component with support for lazy loading and placeholders.

Info A component for displaying informational messages or content.

Use Cases This library is ideal for developers seeking:

Reusable and performant UI components. Strong type safety with TypeScript. An efficient bundling solution for React projects.